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 ihwal isi dari text tersebut. Kotak yang muncul inilah yang disebut dengan tooltips. Trus bagaimana cara menciptakan tooltip menyerupai diatas? Untuk itu ikuti tutorial ini sampai selesai.
Untuk menciptakan tooltip diatas kita memerlukan arahan javascript. Untuk arahan scriptnya dapat 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 sajian 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 sajian 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 arahan style. Kode yang diharapkan menyerupai 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 memakai blogger, maka anda dapat memakai saran untuk meletakkan javascript menyerupai pada posting solusi hosting javascript di blogger . untuk arahan style dapat digabungkan dengan arahan style blog di atas </head>.
Setelah arahan javascript dan style telah diletakkan dengan benar, maka selanjutnya kita meletakkan arahan tooltip di daerah yang kita inginkan. Misalnya kita ingin memasang tooltip pada link referral. Dengan begitu akan menciptakan pembaca lebih tertarik untuk bergabung dengan referral kita. Misalnya kita ingin meletakkan tooltip di text Cara memasang tooltip dengan javascript. Maka karenanya menjadi menyerupai berikut ini. Kode yang kita pasang pada sebuah link :
onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang menciptakan 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 menyerupai berikut ini.
<a onmouseover="ddrivetip('tutorial bagaimana memasang sebuah tooltip yang menciptakan text menjadi lebih menarik.', 240)" onmouseout="hideddrivetip()" href=" " target="_blank">Cara memasang tooltip dengan javascript</a>jadi arahan tersebut dapat kita pasang pada link refferal, banner atau yang lainnya. untuk mengubah warna background kotak tersebut dapat kita lakukan melalui style css diatas. Akhirnya final juga tutorial javasript episode kali ini. agar tutorial ini dapat berkhasiat untuk anda. Terima kasih banyak buat O-Om yang sudah mau menampilkan goresan pena saya.
0 comments:
Post a Comment