Dengan bantuan elemen CSS dengan posisi absolute dan relative, gambar yang akan di pop-up akan dengan mudah dilatekan pada halaman html...oke deh ga perlu panjang lebar penjelasannya langsung aja ke TKP >>>
1. Buatlah sebuah file CSS dan isikan kode berikut
@charset "utf-8";
/* CSS Document */
.thumbnail {
position:relative;
z-index:0;
}
.thumbnail:hover {
background-color:transparent;
z-index:50;
}
.thumbnail span {
position:absolute;
background-color:lightyellow;
padding:5px;
left:-1000px;
border:1px solid gray;
visibility:hidden;
}
.thumbnail span img {
border-width:0;
padding:2px;
}
.thumbnail:hover span {
visibility:visible;
top:0;
left:50px;
}
2. Persiapkan gambar yang akan dibuat sebagai thumbnail yang akan di hover dan dua gambar lagi sebagai pop up dari gambar yang di hover tersebut. Letakan di sebuah folder dimana Anda menyimpan file css, dan html. Nah sekarang kita buat file html nya , tulis kodenya seperti berikut :
<title>www.ilmudesain.web.id</title>
<link rel="stylesheet" type="text/css" href="style.css" /> <!--script memanggil file css-->
</head>
<body>
<a class="thumbnail" href="http://www.ilmudesain.web.id/"><img src="image/mail.jpg" width="70px" height="50px" /><span><img src="image/mail.jpg" /><br />Mail</span></a>
<a class="thumbnail" href="http://www.ilmudesain.web.id/"><img src="image/Network Service.png" width="70px" height="50px"/><span><img src="image/Network Service.png" /><br />Design</span></a>
</body>
</html>
Jika dijalankan di browser maka hasilnya seperti berikut
Password PDF : www.ilmudesain.web.id
0 comments:
Post a Comment
Please Your Comment