Membuat Menu Pop-Up Gambar


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


Artikel Menarik Lainnya :



0 comments:

Post a Comment

Please Your Comment

Entri Populer

Kontak Saya

HP/WA : 08562616116

Total Pageviews

Teman-Teman Blogger

Dapatkan Update artikel IDG ke email Anda

Ilmu Desain Grafis Copyright © 2009 Community is Designed by Bie | development by Muryan Awaludin