MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

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 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://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!


0 comments:

Posting Komentar