Hai sob, ketemu lagi dengan posting aku yg lalu. Kali ini sejuta trik blogger ingin menyebarkan Macam-macam Script Link Hover. Apa sih Link Hover itu?
Link hover ialah sebutan untuk perukomponen warna bila link tersebut disentubuh disentuh oleh mouse. Sebagai pola arahkan pointer atau anak panah mouse ke salah satu hidangan label blog ini. Maka akan otomatis berubah warna. Maka dari itu disebut Link Hover.
Sebenarnya berbagai yg sudah memposting perihal link hover ini hususnya Raninbow. Dalam web absurd malah disebutkan Link Fader dan lain-lain. Entah apa bedanya? Kalau berdasarkan aku kurang lebih tidak jauh berbeda.
Baik tanpa banyak kata-kata lagi eksklusif saja pilih yg disuka. Kode dalam gambar kertas di bawah ialah scrool. Kaprikornus dimohon jangan ada yg ketinggalan! Tinggal Copas di notepad ya!. Supaya alhasil sama dengan aslinya.
1. Rainbow (Pelangi)
<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>
2. Link Hover Lost (Link berubah warna kemudian akan menghilang)
<script>
/******************************************************************
* Script name: Link fader
* Version: 0.5
* Date: 02.05.02
* Usage: Freeware (as long as you don't remove this comment)
*
* Script by: Fayez Zaheer (viol8r on #webdesign [uk.zanet.org.za])
* Email: fayez at impenetrable.org
* Web site: http://impenetrable.org
* Original idea: http://anarchos.xs.mw/fade.
******************************************************************/
// Make sure not to add a # to fcS and fcE - use hex values 6 characters in length ONLY
var fcS = "ffffff";
// Original colour of your links
var fcE = "ff0000";
// Fade to which colour?
var fBy = 5;
// Changing this will affect how accurately the fade to colour is "reached". A value of 1 is most accurate
var speed = 10;
// Delay in milliseconds of the change from each individual colour to the next during the fade
// Unless you want the ability to let your visitors change the
// fade to colour, you can delete the following function
function fadeTo()
{
var c = prompt("What colour do you want to fade to (no #)?", "ff0000");
convertHex(c);
fcEr = r;
fcEg = g;
fcEb = b;
}
// Stop deleting.
// IF YOU DON'T KNOW WHAT YOU ARE DOING,
// DON'T EDIT ANYTHING BEYOND THIS POINT
var r , g, b, fcEr, fcEg, fcEb, fcSr, fcSg, fcSb, fi, fo, x = 0, h = new String();
function convertHex(hex)
{
r = hex.substring(0, 2);
r = parseInt(r, 16);
g = hex.substring(2, 4);
g = parseInt(g, 16);
b = hex.substring(4, 6);
b = parseInt(b, 16);
}
convertHex(fcE);
fcEr = r;
fcEg = g;
fcEb = b;
convertHex(fcS);
fcSr = r;
fcSg = g;
fcSb = b;
function fadeIn(x)
{
if ((r > fcEr) && (r-fBy >= 0)) r -= fBy;
if ((g > fcEg) && (g-fBy >= 0)) g -= fBy;
if ((b > fcEb) && (b-fBy >= 0)) b -= fBy;
if ((r < fcEr) && (r+fBy <= 255)) r += fBy;
if ((g < fcEg) && (g+fBy <= 255)) g += fBy;
if ((b < fcEb) && (b+fBy <= 255)) b += fBy;
document.links[x].style.color = "rgb(" + r + "," + g + "," + b + ")";
if ((r == fcEr) && (b == fcEb) && (g == fcEg))
clearInterval(fi);
}
function fadeOut(x)
{
if ((r < fcSr) && (r+fBy <= 255)) r += fBy;
if ((g < fcSg) && (g+fBy <= 255)) g += fBy;
if ((b < fcSb) && (b+fBy <= 255)) b += fBy;
if ((r > fcSr) && (r-fBy >= 0)) r -= fBy;
if ((g > fcSg) && (g-fBy >= 0)) g -= fBy;
if ((b > fcSb) && (b-fBy >= 0)) b -= fBy;
document.links[x].style.color = "rgb(" + r + "," + g + "," + b + ")";
if ((r == fcSr) && (b == fcSb) && (g == fcSg))
clearInterval(fo);
}
function findLink()
{
convertHex(fcS);
clearInterval(fo);
clearInterval(fi);
document.links[x].style.color = "#" + fcS;
x = 0;
while (!(this.id == document.links[x].id) && (x < document.links.length))
x++;
if (this.id == document.links[x].id)
fi = setInterval("fadeIn(" + x + ")", speed);
}
if ((!document.layers) && (document.links))
{
for (var i = 0; i < document.links.length; i++)
{
document.links[i].id = "link" + i;
document.links[i].onmouseover = findLink;
document.links[i].onmouseout = function mouseOut() { clearInterval(fi); clearInterval(fo); fo = setInterval("fadeOut(" + x + ")", speed); };
}
}
</script>
3. Link Hover Blink
<SCRIPT LANGUAGE='JAVASCRIPT' TYPE='TEXT/JAVASCRIPT'>
<!-- /**************************************************** Created With: PopupGenerator URL: http://www.popupgenerator.com ****************************************************/ var win=null; function NewWindow(mypage,myname,w,h,pos,infocus){ if(pos=="random"){myleft=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;mytop=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;} if(pos=="center"){myleft=(screen.width)?(screen.width-w)/2:100;mytop=(screen.height)?(screen.height-h)/2:100;} else if((pos!='center' && pos!="random") || pos==null){myleft=0;mytop=20} settings="width=" + w + ",height=" + h + ",top=" + mytop + ",left=" + myleft + ",scrollbars=yes,location=yes,directories=yes,status=no,menubar=no,toolbar=no,resizable=yes";win=window.open(mypage,myname,settings); win.focus();} // -->
</SCRIPT>
<style>
a:hover {
color:#00FFFF;
text-decoration:blink;
border-bottom:1px dotted #003300;
}
</style>
Penting !
1. Untuk arahan no1. Bisa kalian ubah kecepatan berubah warnanya pada warna hijau ganti angka lebih sedikit untuk lebih pelan, dan kebalikannya.
2. Semua arahan di atas akan berjalan baik di tiap posting atau di sidebar blog. Jika di tempatkan pada urutan widget teratas. Ini dimaksudkan biar pemanggilan script pengubah warna atau hover ini lebih diprioritaskan.
3. Mohon maaf dikarenakan tutorial merupakan script. Untuk demo hasil dari script link hover tidak aku tampilkan. Sebagai gantinya silakan dicoba saja. Toh malah tau bedanya. Ya ga?
Nah, sementara itu yg sanggup sejuta trik blogger berikan perihal macam-macam script link hover. Untuk kemudian akan diupdate lain waktu. Itu pun bila aku sanggup script yg baru. ha ha ha ha ha.
Happy Blogging! by. Sejuta Trik Blogger
