Translate This Blog
Always Remember To Back Up Your Template Before Attempting Any Of The Tweaks On This Site

Do to error codes you should use the old interface when attempting many of these tweaks to your template

Multi Colored Links When Hovering

With this tweak you can create multi colored links when hovering over the hyperlinked text.

Design--> Edit HTML--> Click Ctrl+F

A find/search bar will pop up and in the box you will input </head>

This will locate the </head> tag in your template. Just above the </head> tag place this code below.

<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 comments:

Web Design Blogs PageRank