Rabu, 10 Februari 2010

Cara memasang tooltip dengan javascript


Penulis: Anawia putra | anawia.com





Biar tutorial ini menjadi bikin anda penasaran, coba anda arahkan mouse anda pada text berikut ini.

Cara memasang tooltip dengan javascript

Setelah mouse anda arahkan pada text diatas untuk beberapa saat, maka anda akan melihat sebuah tampilan kotak yang berisi diskripsi yang menjelaskan tentang isi dari text tersebut. Kotak yang muncul inilah yang disebut dengan tooltips. Trus bagaimana cara membuat tooltip seperti diatas? Untuk itu ikuti tutorial ini hingga selesai.

 


Untuk membuat tooltip diatas kita memerlukan kode javascript. Untuk kode scriptnya bisa anda lihat pada kotak dibawah ini.


 


<script type="text/javascript">

/***********************************************

* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/



var offsetfromcursorX=12 //Customize x offset of tooltip

var offsetfromcursorY=10 //Customize y offset of tooltip

var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to
pointer image

var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to
pointer image

document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV

document.write('<img id="dhtmlpointer" src="arrow2.gif">') //write out pointer
image



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") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] :
document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat")?
document.documentElement : document.body

}

function ddrivetip(thetext, thewidth, thecolor){

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 nondefaultpos=false

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 winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20

var winheight=ie&&!window.opera? ietruebody().clientHeight :
window.innerHeight-20



var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX :
winwidth-e.clientX-offsetfromcursorX

var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY :
winheight-e.clientY-offsetfromcursorY



var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-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=curX-tipobj.offsetWidth+"px"

nondefaultpos=true

}

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+offsetfromcursorX-offsetdivfrompointerX+"px"

pointerobj.style.left=curX+offsetfromcursorX+"px"

}

//same concept with the vertical position

if (bottomedge<tipobj.offsetHeight){

tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"

nondefaultpos=true

}

else{

tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"

pointerobj.style.top=curY+offsetfromcursorY+"px"

}

tipobj.style.visibility="visible"

if (!nondefaultpos)

pointerobj.style.visibility="visible"

else

pointerobj.style.visibility="hidden"

}

}



function hideddrivetip(){

if (ns6||ie){

enabletip=false

tipobj.style.visibility="hidden"

pointerobj.style.visibility="hidden"

tipobj.style.left="-1000px"

tipobj.style.backgroundColor=''

tipobj.style.width=''

}

}

document.onmousemove=positiontip

</script>


 


Untuk mengatur bagaimana tampilan tooltip tersebut nantinya, maka disini memerlukan kode style. Kode yang diperlukan seperti berikut ini.


 


<style type="text/css">

#dhtmltooltip{

position: absolute;

left: -300px;

width: 150px;

border: 1px solid black;

padding: 2px;

background-color: #E1EEFD  ; font-family:"Verdana",Arial;font-size:12px;

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);

}

#dhtmlpointer{

position:absolute;

left: -300px;

z-index: 101;

visibility: hidden;

}

</style>


 


Kode script dan style diatas sebelumnya letakkan dihosting anda. Jika anda menggunakan blogger, maka anda bisa menggunakan saran untuk meletakkan javascript seperti pada posting solusi hosting javascript di blogger . untuk kode style bisa digabungkan dengan kode style blog di atas </head>.


 


Setelah kode javascript dan style telah diletakkan dengan benar, maka selanjutnya kita meletakkan kode tooltip di tempat yang kita inginkan. Misalnya kita ingin memasang tooltip pada link referral. Dengan begitu akan membuat pembaca lebih tertarik untuk bergabung dengan referral kita.

Misalnya kita ingin meletakkan tooltip di text Cara memasang tooltip dengan javascript. Maka hasilnya menjadi seperti berikut ini.

Kode yang kita pasang pada sebuah link :


 


onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang membuat text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()"

 

keterangan :

merah = text yang kita inginkan muncul di tooltip

Biru = lebar kotak yang kita inginkan

secara keseluruhan kodenya menjadi seperti berikut ini.


 


<a onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang membuat text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()" href="http://www.o-om.com/2010/02/cara-memasang-tooltip-dengan-javascript.html" target="_blank">Cara memasang tooltip dengan javascript</a>

 

jadi kode tersebut bisa kita pasang pada link refferal, banner atau yang lainnya. untuk mengubah warna background kotak tersebut bisa kita lakukan melalui style css diatas.

Akhirnya selesai juga tutorial javasript episode kali ini. semoga tutorial ini bisa berguna untuk anda. Terima kasih banyak buat O-Om yang sudah mau menampilkan tulisan saya.






Penasaran siapa dibalik penulis artikel ini? Anawia putra | anawia.com







Tidak ada komentar:

Posting Komentar