Animasi Tooltip dengan Javascript
Animasi tooltip ini dapat dengan mudah anda buat dengan menggunakan tag <div> yang sudah ada, dan ini akan memberikan kemudahan kepada anda untuk memodifikasi isi tooltip dengan bebas.
Dengan dukungan sebuah Javascript, anda dapat dengan mudah menentukan beberapa kreativitas yang dapat anda tentukan sendiri. Berikut ini adalah Javascript yang digunakan untuk membuat Animasi Tooltip:
<script type="text/javascript">
// Free for any type of use so long as original notice remains unchanged.
// Report errors to feedback@ashishware.com
//Copyrights 2006, Ashish Patil , ashishware.com
//////////////////////////////////////////////////////////////////////////
function ToolTip(id,isAnimated,aniSpeed)
{ var isInit = -1;
var div,divWidth,divHeight;
var xincr=10,yincr=10;
var animateToolTip =false;
var html;
function Init(id)
{
div = document.getElementById(id);
if(div==null) return;
if((div.style.width=="" || div.style.height==""))
{alert("Both width and height must be set");
return;}
divWidth = parseInt(div.style.width);
divHeight= parseInt(div.style.height);
if(div.style.overflow!="hidden")div.style.overflow="hidden";
if(div.style.display!="none")div.style.display="none";
if(div.style.position!="absolute")div.style.position="absolute";
if(isAnimated && aniSpeed>0)
{xincr = parseInt(divWidth/aniSpeed);
yincr = parseInt(divHeight/aniSpeed);
animateToolTip = true;
}
isInit++;
}
this.Show = function(e,strHTML)
{
if(isInit<0) return;
var newPosx,newPosy,height,width;
if(typeof( document.documentElement.clientWidth ) == 'number' ){
width = document.body.clientWidth;
height = document.body.clientHeight;}
else
{
width = parseInt(window.innerWidth);
height = parseInt(window.innerHeight);
}
var curPosx = (e.x)?parseInt(e.x):parseInt(e.clientX);
var curPosy = (e.y)?parseInt(e.y):parseInt(e.clientY);
if(strHTML!=null)
{html = strHTML;
div.innerHTML=html;}
if((curPosx+divWidth+10)< width)
newPosx= curPosx+10;
else
newPosx = curPosx-divWidth;
if((curPosy+divHeight)< height)
newPosy= curPosy;
else
newPosy = curPosy-divHeight-10;
if(window.pageYOffset)
{ newPosy= newPosy+ window.pageYOffset;
newPosx = newPosx + window.pageXOffset;}
else
{ newPosy= newPosy+ document.body.scrollTop;
newPosx = newPosx + document.body.scrollLeft;}
div.style.display='block';
//debugger;
//alert(document.body.scrollTop);
div.style.top= newPosy + "px";
div.style.left= newPosx+ "px";
div.focus();
if(animateToolTip){
div.style.height= "0px";
div.style.width= "0px";
ToolTip.animate(div.id,divHeight,divWidth);}
}
this.Hide= function(e)
{div.style.display='none';
if(!animateToolTip)return;
div.style.height= "0px";
div.style.width= "0px";}
this.SetHTML = function(strHTML)
{html = strHTML;
div.innerHTML=html;}
ToolTip.animate = function(a,iHeight,iWidth)
{ a = document.getElementById(a);
var i = parseInt(a.style.width)+xincr ;
var j = parseInt(a.style.height)+yincr;
if(i <= iWidth)
{a.style.width = i+"px";}
else
{a.style.width = iWidth+"px";}
if(j <= iHeight)
{a.style.height = j+"px";}
else
{a.style.height = iHeight+"px";}
if(!((i > iWidth) && (j > iHeight)))
setTimeout( "ToolTip.animate('"+a.id+"',"+iHeight+","+iWidth+")",1);
}
Init(id);
}
</script>
Setelah itu anda perlu menentukan tinggi dan lebar dokumen dalam pixel, tepatnya dalam tag div, yang berfungsi sebagai tubuh tooltip itu sendiri. Dan anda dapat menerapkan CSS apapun untuk menentukan formatnya. Contoh:
<div id="a" style="background-color:ivory;width: 150px; height: 49px;border: solid 1px gray; text-align: center;">
A very simple tooltip
</div>
A very simple tooltip
</div>
Kemudian mendeklarasikan sebuah variabel javascript, yaitu 't1' yang digunakan dalam contoh tooltip ini. Hal ini diikuti oleh dua variabel lainnya yaitu 'l1' dan 'l2' untuk menahan string. Sedangkan function init() berfungsi membuat objek tooltip baru. Fungsi parameter pertama adalah menentukan ID dari div, Parameter kedua adalah untuk menentukan false dan true. Apabila diatur ke false, ini menunjukkan bahwa anda tidak menginginkan animasi, dan jika di set ke true ini artinya anda dapat meneruskan ke parameter selanjutnya, yaitu parameter ke tiga untuk menentukan kecepatan animasi. Untuk lebih jelasnya Lihat contoh:
<script>
var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
{
t1 = new ToolTip("a",false);
}
</script>
Tambahkan script tersebut setelah tag </body>:var t1=null;
var l1="Tooltip for line one";
var l2="Tooltip for line two";
function init()
{
t1 = new ToolTip("a",false);
}
</script>
Langkah selanjutnya adalah menentukan tooltip. Untuk objek apapun, Animasi Tooltip ini menggunakan sintaks sebagai berikut:
<strong>
Gerakkan Mouse anda pada Text atau Link, untuk melihat Animasi Tooltip...<br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
Line One
</span>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
Line Two
</span>
</strong>
Animasi tooltip ini ditampilkan ketika mouse moves over pada konten dan menyembunyikannya ketika mouse moves out. Di sini, t1 adalah obyek tooltip yang di buat, sedangkan 'l1' dan 'l2' berisi teks yang akan ditampilkan untuk setiap tooltip. Teks ini dapat berisi konten HTML yang valid. Gerakkan Mouse anda pada Text atau Link, untuk melihat Animasi Tooltip...<br>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l1) onmouseout=if(t1)t1.Hide(event)>
Line One
</span>
<span class="ttip" onmouseover=if(t1)t1.Show(event,l2) onmouseout=if(t1)t1.Hide(event)>
Line Two
</span>
</strong>
Terakhir yang paling penting adalah memanggil fungsi init () ketika halaman loads. Anda dapat menggunakan Event.observe atau event.connect untuk mempertimbangkan beberapa aspek 'beban', lihat kode di bawah ini.
<body onload=init()>
Berikut ini adalah kode lengkap untuk membuat Animasi Tooltip:
<html>
<head>
<script language="javascript" src="animasitooltip.js"></script>
<LINK rel="stylesheet" type="text/css" href="animasitooltip.css">
</head>
<body onload=init()>
<strong>
Move your mouse over following lines:<br><br>
<ul>
<li><span class="ttip" onmouseover="if(t1)t1.Show(event)" onmouseout="if(t1)t1.Hide(event)">
Simple tooltip
</span></li>
<li><span class="ttip" onmouseover="if(t2)t2.Show(event)" onmouseout="if(t2)t2.Hide(event)">
Simple animated tooltip
</span></li>
<li><span class="ttip" onmouseover="if(t3)t3.Show(event)" onmouseout="if(t3)t3.Hide(event)">
Translucent tooltip
</span></li>
<li><span class="ttip" onmouseover="if(t4)t4.Show(event)" onmouseout="if(t4)t4.Hide(event)">
Tooltip with background image
</span></li>
</ul>
</strong>
<div id="a" style="background-color: ivory; border: solid 1px gray; color: black; font-size: smaller; height: 49px; text-align: center; width: 184px;">
A very simple tooltip
</div>
<div id="b" style="background-color: #b1f0ca; border: solid 1px gray; color: black; font-size: smaller; height: 60px; text-align: center; width: 184px;">
Animated tooltip !
The speed of animation can be varied.
</div>
<div id="c" style="background-color: skyblue; border: solid 1px gray; color: black; filter: alpha(Opacity=75); font-size: smaller; height: 49px; opacity: 0.75; text-align: center; width: 184px;">
A translucent tooltip!
</div>
<div id="d" style="background-color: white; background-image: url(https://sites.google.com/site/archivesiugi/javascr/bg.jpg); border: solid 1px gray; color: black; filter: alpha(Opacity=75); font-size: smaller; height: 49px; opacity: 0.75; text-align: center; width: 184px;">
Tooltip with background, opacity and animation.
</div>
</body>
<script>
var t1=t2=t3=t4=null;
function init()
{
t1 = new ToolTip("a",false);
t2 = new ToolTip("b",true,40);
t3 = new ToolTip("c",true,40);
t4 = new ToolTip("d",true,40);
}
</script>
</html>
sumber: ashishware<head>
<script language="javascript" src="animasitooltip.js"></script>
<LINK rel="stylesheet" type="text/css" href="animasitooltip.css">
</head>
<body onload=init()>
<strong>
Move your mouse over following lines:<br><br>
<ul>
<li><span class="ttip" onmouseover="if(t1)t1.Show(event)" onmouseout="if(t1)t1.Hide(event)">
Simple tooltip
</span></li>
<li><span class="ttip" onmouseover="if(t2)t2.Show(event)" onmouseout="if(t2)t2.Hide(event)">
Simple animated tooltip
</span></li>
<li><span class="ttip" onmouseover="if(t3)t3.Show(event)" onmouseout="if(t3)t3.Hide(event)">
Translucent tooltip
</span></li>
<li><span class="ttip" onmouseover="if(t4)t4.Show(event)" onmouseout="if(t4)t4.Hide(event)">
Tooltip with background image
</span></li>
</ul>
</strong>
<div id="a" style="background-color: ivory; border: solid 1px gray; color: black; font-size: smaller; height: 49px; text-align: center; width: 184px;">
A very simple tooltip
</div>
<div id="b" style="background-color: #b1f0ca; border: solid 1px gray; color: black; font-size: smaller; height: 60px; text-align: center; width: 184px;">
Animated tooltip !
The speed of animation can be varied.
</div>
<div id="c" style="background-color: skyblue; border: solid 1px gray; color: black; filter: alpha(Opacity=75); font-size: smaller; height: 49px; opacity: 0.75; text-align: center; width: 184px;">
A translucent tooltip!
</div>
<div id="d" style="background-color: white; background-image: url(https://sites.google.com/site/archivesiugi/javascr/bg.jpg); border: solid 1px gray; color: black; filter: alpha(Opacity=75); font-size: smaller; height: 49px; opacity: 0.75; text-align: center; width: 184px;">
Tooltip with background, opacity and animation.
</div>
</body>
<script>
var t1=t2=t3=t4=null;
function init()
{
t1 = new ToolTip("a",false);
t2 = new ToolTip("b",true,40);
t3 = new ToolTip("c",true,40);
t4 = new ToolTip("d",true,40);
}
</script>
</html>
A very simple tooltip
Animated tooltip !
The speed of animation can be varied.
The speed of animation can be varied.
A translucent tooltip!
Tooltip with background, opacity and animation.
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon