Minggu, 24 Juli 2011

0 Cara Membuat Efek Hover Image Di Depan Link


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

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 saja
langkah 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://lh5.googleusercontent.com/-4Z91c1zuZQU/TibFhRphsuI/AAAAAAAABjE/lNmHnieXCS8/greenup.gif", 14, 2, 0]
var bulletimg2=["https://lh3.googleusercontent.com/-x5F3D0XzKZo/TibFhqLSRjI/AAAAAAAABjI/I8055GX1Pnk/search.gif", 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!

0 komentar:

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *