<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Ornek </title>
<style type="text/css">
body{background-color: orange;}
#galeri{position: relative; width: 300px; height: 200px; margin-bottom: 10px;}
img{width: 300px; height: 200px; position: absolute; left: 0px; right: 0px;}
</style>
</head>
<body>
<script>
function z(){
var x = confirm('Cıkmak istiyormusunuz?');
if (x == true) {
window.close();
}
else
{
alert("");
}
}
function resmiGoster1(){
document.getElementById("resim1").style.zIndex="2";
document.getElementById("resim2").style.zIndex="1";
document.getElementById("resim3").style.zIndex="1";
}
function resmiGoster2(){
document.getElementById("resim1").style.zIndex="1";
document.getElementById("resim2").style.zIndex="2";
document.getElementById("resim3").style.zIndex="1";
}
function resmiGoster3(){
document.getElementById("resim1").style.zIndex="1";
document.getElementById("resim2").style.zIndex="1";
document.getElementById("resim3").style.zIndex="2";
}
</script>
<div id="galeri">
<img src="resimler/gunbatımı.jpg" id="resim1">
<img src="resimler/kahvebilgisayar.jpg" id="resim2">
<img src="resimler/kumsal.jpg" id="resim3">
</div>
<div>
<input type="button" onmousemove="resmiGoster1()" value="resim1">
<input type="button" onmousemove="resmiGoster2()" value="resim2">
<input type="button" onmousemove="resmiGoster3()" value="resim3">
<input type="button" onclick="z()" value="Çıkış">
</div>
</body>
</html>
FullDev © 2023