Cara Membuat Efek Hover Image Di Depan Link

Pernahkah Anda melihat ketika cursor menyorot
sebuah link maka di depan link tersebut muncul
gambar ? Kalau belum, cobalah cursor Anda sorot-kan ke deretan link-link yang ada di bawah ini :

Membuat Garis Berdansa di Blog

Aneka Macam Kalender Untuk Blog

Membuat Kalender Yang Keren


Anda bisa coba juga pada deretan link-link yang ini :

Cara Membuat Gambar Bisa Diputar

Membuat Gambar Bisa Diputar #2

Cara Membuat Floating Slide Menu


Demikianlah maksud dari tutorial yang " dibagikan "kali ini. Untuk membuatnya, Anda ikuti sajalangkah yang seperti berikut ini :

1.   Masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode yang ada di bawah ini dan
      paste-kan di atas tag </head> ini,
      lalu simpan template anda.

<style type="text/css">

.bulletimagestyle{ /*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}

</style>

<script type="text/javascript">

/***********************************************
* Bullet Link script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* User script http://www.syamsudinnamaku.blogspot.com/
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//Define your bullet image(s) via arbitrary variables, where bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIhb9ersRCh9dYuUjgqnPbH1UMrtOGeZj9Y5Lpp2fFd1uCT-gHjiAMKdhBbSdmLns7sZuWiEp2mHs6riBNlNLv5v2JeiGDAgl84Hgy9cz7pttUnAEFUY5nlky9Gl5g6e2ZyfE_0e6LB123/", 14, 2, 0]
var bulletimg2=["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TxQk289SRctQrbd5dPmo3ZQGArOtb1FvfKSK0dUn3etPspE9N6ZE6wehchULiJS4xdratkl6oA-D8W8LRwb8ZiNLKrLKghVl2Vf20v8ZQKZQExyZgOXyMqSqMbkcjnlpdMixVkl2o2XW/", 17, 4, 0]

////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element

function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function displaybullet(linkobj){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left=caloffset(linkobj, "left")-reltovar[1]-reltovar[2]+"px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks

</script>

<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" />

KETERANGAN :

Ganti gambar imagenya dengan milik Anda pada
kode var bulletimg1= dan var bulletimg2=

4.   Untuk menimbulkan gambarnya pada link Anda,
      sisipkan kode class="ddbullet" rel="bulletimg1"
      atau kode class="oldclass ddbullet" rel="bulletimg2"
      diantara link-link yang akan Anda beri efek ini.

Pemakaian untuk contoh yang pertama adalah :

<a href='URL Anda di sini' class="ddbullet" rel="bulletimg1">Keterangan Link</a>

Dan pemakaian untuk contoh yang kedua adalah :

<a href='URL Anda di sini' class="oldclass ddbullet" rel="bulletimg2">Keterangan Link</a>

Selamat mencoba, good luck!