Rabu, 01 Agustus 2012
Sebagai web designer kadang kita ingin memberi sentuhan elegan yang atraktif tanpa menghilangkan esensi kesederhanaan sebuah situs. Contohnya, membuat deskripsi dari suatu gambar atau kata. Maunya, sih, tak perlu lah memberi ruang khusus hanya untuk sebaris-dua baris kalimat deskriptif. Selain membuat penuh (oleh tulisan) dan mengacaukan kesan simpel, juga kurang menarik perhatian. Lihat contoh berikut.
Deret logo di bagian bawah footer situs resmi Wisata Bahari Lamongan (WBL) ini ditampilkan dengan tujuan memberi informasi kepada pengunjung bahwa apa yang coba diinterpretasikan dari logo-logo ini memiliki hubungan dengan WBL, yang diharapkan akan diklik oleh mereka. Tentu tidak menarik jika logo hanya sekedar logo saja, bukan? Dengan penambahan deskripsi, logo-logo itu akan semakin “mengundang” untuk diklik.
Lantas dimana sebaiknya meletakkan kalimat deskripsi untuk masing-masing logo? Apakah harus memberi ruang tambah di kolom sekecil itu? Simak lagi contoh berikut.
Kolom deskripsi ditampilkan secara cerdas dan interaktif, hanya jika pengunjung mengarahkan kursor mouse mereka di logo-logo yang diinginkan. Tampilannya simpel, ber-background transparan agar kesannya ringan dan tetap menyatu dengan situs, serta fleksibel dan lincah mengikuti arah gerak kursor. Istilah webnya “tooltip”. Dalam tutorial kali ini, akan dijelaskan cara-cara membuat tooltip yang desainnya mudah dimodifikasi menggunakan CSS dan akan terus tampil mengikuti gerakan kursor selama kursor berada di atas elemen yang ditentukan.
1. Masukkan stylesheet berikut ke dalam tag head halaman Anda.
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
2. Masukkan code ini ke dalam tag body halaman Anda.
<div id="dhtmltooltip"></div>
<script type="text/javascript">
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
3. Terakhir, tambahkan code berikut di dalam link, teks, gambar, atau elemen lain yang ingin diberikan deskripsi atau tooltip.
onMouseover="ddrivetip('Tutorial di Rumahdot.com','red', 300)";
onMouseout="hideddrivetip()"
Selesai. Lihat hasilnya. Mudah sekali, kan?
Kunci dari script ini adalah fungsi ddrivetip(). Simak cara kerjanya.
ddrivetip('TEKS YANG INGIN DITAMPILKAN', 'WARNA BACKGROUND (OPSIONAL)', WIDTH TOOLTIP (OPSIONAL))
Dua parameter terakhir boleh dimasukkan dan boleh tidak. Jika tidak dimasukkan, desain tooltip Anda akan mengikuti bawaan default.
Contoh penggunaan:
<a href="http://www.rumahdot.com" onMouseover="ddrivetip('Ngumpul sesama web designer dan programmer? Disini tempatnya!')";
onMouseout="hideddrivetip()">Rumahdot</a>
Hasilnya:
Penting: Jika tooltip Anda mengandung tanda petik (‘), tambahkan garis miring (\) terlebih dahulu, contoh: (“Yahoo\’s Site”), sebab kalau tidak nanti tooltip Anda tidak akan bisa muncul.
Sekian tutorial kali ini, semoga bermanfaat dan jangan ragu untuk mengkoreksi. Selamat mencoba!
Thanks To : RumahDot.com
