Untuk memperindah tampilan halaman web, salah satu cara yang paling sering dipakai adalah dengan menggunakan javascript. Dan salah satu javascript yang populer adalah overlib (download overlib di sini). Dengan menggunakan overlib Anda dapat memperindah hint pada suatu link.
Di bawah ini kami tampilkan contoh-contoh penggunaan overlib beserta kode untuk membuatnya. Sebelum menambahkan kode-kode di bawah ini, jangan lupa untuk menambahkan baris berikut ini setelah tag <Body> pada halaman web Anda.
<DIV id=overDiv style="POSITION: absolute; Z-INDEX: 1"></DIV> <SCRIPT language=JavaScript src="overlib.js"></SCRIPT> |
catatan :
Pada contoh-contoh di bawah ini, Anda dapat mengganti href="javascript:void(0);" dengan link yang Anda inginkan. Misalnya href="http://www.lutfian.com/"
Link tanpa caption
<a href="javascript:void(0);" onMouseOut=nd() onMouseOver="return overlib('tampilkan teksnya di sini....')"><font face="Verdana, Arial" size="2">Link tanpa caption</font></a> |
Link dengan caption
<a href="http://www.lutfian.com/" onMouseOut=nd() onMouseOver="return overlib('..download freeware...', CAPTION, 'Lutfian Software')" target="_blank"><font face="Verdana, Arial" size="2">Link dengan caption</font></a> |
Hint pada posisi tertentu
<a href="javascript:void(0);" onMouseOut=nd() onMouseOver="return overlib('Hint terletak pada koordinat 50 dan 250.', FIXX, 50, FIXY, 250)"><font size="2" face="Verdana, Arial">Hint pada posisi tertentu</font></a> |
Hint tanpa caption di kiri kursor
<a href="javascript:void(0);" onMouseOut="nd(); return true;" onMouseOver="dls('Hint tanpa caption, ditampilkan di kiri kursor.'); return true;"><font face="Verdana, Arial" size="2">Hint tanpa caption di kiri kursor</font></a> |
Hint dengan caption di kiri kursor
<a href="javascript:void(0);" onMouseOut="nd(); return true;" onMouseOver="dlc('Hint dengan caption, ditampilkan di kiri kursor.','Ini Captionnya!'); return true;"><font face="Verdana, Arial" size="2">Hint dengan caption di kiri kursor</font></a> |
Item 1 Item 2 Item 3 ')">Hint dengan list <a href="http://www.lutfian.com/" onMouseOut=nd() onMouseOver="return overlib('..download freeware...', CAPTION, 'Lutfian Software')" target="_blank"><font face="Verdana, Arial" size="2">Link dengan caption</font></a> |
')">Hint dengan gambar
<a href="javascript:void(0);" onMouseOut=nd() onMouseOver="return overlib('Hint dg gambar <img src=../../images/panah.gif>')"><font face="Verdana, Arial" size="2">Hint dengan gambar</font></a> |
Posting Komentar