-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path040 semsiye_mouse.html
73 lines (62 loc) · 2.33 KB
/
040 semsiye_mouse.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Şemsiye</title>
<style>
/* #semsiye{
display: block;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 50%;
}*/
.nesne {
height: 100vh;/* vertical height =dikey yükseklik*/
width: 100%; /* genişlik %100*/
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
}
</style>
<script>
function sekilOrtala(){
//ekranGenislik=window.screen.width; //Tüm ekran genişliği
//ekranYukseklik=window.screen.height; //Tüm ekran yüksekliği
//alert(ekranGenislik+"x"+ekranYukseklik);
//body alanının genişlik ve yüksekliği altta-bize bu bilgi lazım
genislik= document.body.clientWidth;
yukseklik=document.body.clientHeight;
// alert(genislik+"x"+yukseklik);
//semsiye id'li resmin genişliğini öğreniyoruz
nesneGenislik= document.getElementById("semsiye").style.width;
nesneYukseklik= document.getElementById("semsiye").style.height;
//resmi sol boşluğunu hesaplıyoruz.
solbosluk=(genislik-nesneGenislik)/2;
ustbosluk=(yukseklik-nesneYukseklik)/2;
document.getElementById("semsiye").style.marginLeft=solbosluk+"px";
document.getElementById("semsiye").style.marginTop=ustbosluk+"px";
}
function semsiyeKapat(){
document.getElementById("semsiye").src ="images/semsiye_kapali.jpg";
}
function semsiyeAc(){
document.getElementById("semsiye").src ="images/semsiye_acik.jpg";
}
</script>
</head>
<body>
<div class="nesne">
<img src="images/semsiye_kapali.jpg" id="semsiye" onmousemove="semsiyeAc()"
onmouseleave="semsiyeKapat()" >
</div>
<!-- <img src="images/bogaz.JPG" class="center" alt="">-->
</body>
</html>