Tooltip merupakan info atau keterangan yang akan tampil pada gambar, dimana ketika kursor mouse menyorot suatu gambar, maka pada gambar tersebut akan muncul keterangan. Teknik ini akan bermanfaat agar gambar pada website anda menjadi lebih hidup dengan adanya keterangan pada gambar tersebut.
Untuk membuatnya, kita akan menggunakan library dari JQury yaitu JQuery-tool-min.js.
untuk mendapatkan library tersebut, anda bisa mendownloadnya melalui link dibawah ini
DOWNLOAD DISINI
Selanjutnya buatlah programnya terlebih dahulu untuk menampilkan gambar
<html>
<head>
<title>Algoritma-cyber.blogspot.com - Tooltip pada gambar</title>
</head>
<body bgcolor="black"><center>
<h2><font color="white">Membuat Tooltip Pada Gambar</font></h2>
<div style="position: absolute; display:none;" id="tampil"></div>
<div id="gambar">
<img src="gambar/542173_4264150768544_1165075416_n.jpg" title="Kunjungi Blog Tutorial: algoritma-cyber.blogspot.com">
</div>
</body>
</html>Program tersebut akan menghasilkan output seperti gambar dibawah ini
Jika anda sorot, tentunya belum menghasilkan apa-apa, karena program tersebut hanya menampilkan gambar saja.
sekarang siapkan gambar yang akan dijadikan tempat untuk keterangan pada gambar
#tampil {
background:transparent url(../gambar/black_arrow.png);
font-size:14px;
height:60px;
width:160px;
padding:25px;
color:white;
}
#gambar img {
cursor:pointer;
margin:10 80px;
width:300;
}
body {
padding:50px 50px;
}sekarang, kembali pada program yang pertama,
tambahakn skript untuk memanggil css yang baru saja dibuat, tepat dibawah kode <head>
<link rel="stylesheet" href="jquery/tooltip.css" type="text/css">
selanjutnya tambahkan skript untuk memanggil library jquery yang baru saja kita download, tepat dibawah kode untuk memanggil css
<link rel="stylesheet" href="jquery/tooltip.css" type="text/css">
selnjutnya tambahakn javascript tepat dibawah kode tersebut.
<script type="text/javascript">
$(document).ready(function(){
$("#gambar img[title]").tooltip('#tampil');
});
</script>
simpan program anda,
dan coba anda jalankan, jika berhasil akan menghasilkan output seperti dibawah ini, tooltip ini akan muncul ketika mouse sedang menyorot gambar
0 komentar:
Posting Komentar - Back to Content