Advertisement
html-tutorials

Rainbow Hover

Aug 12th, 2012
11,710
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.21 KB | None | 0 0
  1. <script type='text/javascript'>
  2. //<![CDATA[
  3. var rate = 50;
  4. if (document.getElementById)
  5. window.onerror=new Function("return true")
  6.  
  7. var objActive; // The object which event occured in
  8. var act = 0; // Flag during the action
  9. var elmH = 0; // Hue
  10. var elmS = 128; // Saturation
  11. var elmV = 255; // Value
  12. var clrOrg; // A color before the change
  13. var TimerID; // Timer ID
  14. if (document.all) {
  15. document.onmouseover = doRainbowAnchor;
  16. document.onmouseout = stopRainbowAnchor;
  17. }
  18. else if (document.getElementById) {
  19. document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  20. document.onmouseover = Mozilla_doRainbowAnchor;
  21. document.onmouseout = Mozilla_stopRainbowAnchor;
  22. }
  23. function doRainbow(obj)
  24. {
  25. if (act == 0) {
  26. act = 1;
  27. if (obj)
  28. objActive = obj;
  29. else
  30. objActive = event.srcElement;
  31. clrOrg = objActive.style.color;
  32. TimerID = setInterval("ChangeColor()",100);
  33. }
  34. }
  35. function stopRainbow()
  36. {
  37. if (act) {
  38. objActive.style.color = clrOrg;
  39. clearInterval(TimerID);
  40. act = 0;
  41. }
  42. }
  43. function doRainbowAnchor()
  44. {
  45. if (act == 0) {
  46. var obj = event.srcElement;
  47. while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  48. obj = obj.parentElement;
  49. if (obj.tagName == 'A' || obj.tagName == 'BODY')
  50. break;
  51. }
  52. if (obj.tagName == 'A' && obj.href != '') {
  53. objActive = obj;
  54. act = 1;
  55. clrOrg = objActive.style.color;
  56. TimerID = setInterval("ChangeColor()",100);
  57. }
  58. }
  59. }
  60. function stopRainbowAnchor()
  61. {
  62. if (act) {
  63. if (objActive.tagName == 'A') {
  64. objActive.style.color = clrOrg;
  65. clearInterval(TimerID);
  66. act = 0;
  67. }
  68. }
  69. }
  70. function Mozilla_doRainbowAnchor(e)
  71. {
  72. if (act == 0) {
  73. obj = e.target;
  74. while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  75. obj = obj.parentNode;
  76. if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  77. break;
  78. }
  79. if (obj.nodeName == 'A' && obj.href != '') {
  80. objActive = obj;
  81. act = 1;
  82. clrOrg = obj.style.color;
  83. TimerID = setInterval("ChangeColor()",100);
  84. }
  85. }
  86. }
  87. function Mozilla_stopRainbowAnchor(e)
  88. {
  89. if (act) {
  90. if (objActive.nodeName == 'A') {
  91. objActive.style.color = clrOrg;
  92. clearInterval(TimerID);
  93. act = 0;
  94. }
  95. }
  96. }
  97. function ChangeColor()
  98. {
  99. objActive.style.color = makeColor();
  100. }
  101. function makeColor()
  102. {
  103. // Don't you think Color Gamut to look like Rainbow?
  104. // HSVtoRGB
  105. if (elmS == 0) {
  106. elmR = elmV; elmG = elmV; elmB = elmV;
  107. }
  108. else {
  109. t1 = elmV;
  110. t2 = (255 - elmS) * elmV / 255;
  111. t3 = elmH % 60;
  112. t3 = (t1 - t2) * t3 / 60;
  113. if (elmH < 60) {
  114. elmR = t1; elmB = t2; elmG = t2 + t3;
  115. }
  116. else if (elmH < 120) {
  117. elmG = t1; elmB = t2; elmR = t1 - t3;
  118. }
  119. else if (elmH < 180) {
  120. elmG = t1; elmR = t2; elmB = t2 + t3;
  121. }
  122. else if (elmH < 240) {
  123. elmB = t1; elmR = t2; elmG = t1 - t3;
  124. }
  125. else if (elmH < 300) {
  126. elmB = t1; elmG = t2; elmR = t2 + t3;
  127. }
  128. else if (elmH < 360) {
  129. elmR = t1; elmG = t2; elmB = t1 - t3;
  130. }
  131. else {
  132. elmR = 0; elmG = 0; elmB = 0;
  133. }
  134. }
  135. elmR = Math.floor(elmR).toString(16);
  136. elmG = Math.floor(elmG).toString(16);
  137. elmB = Math.floor(elmB).toString(16);
  138. if (elmR.length == 1) elmR = "0" + elmR;
  139. if (elmG.length == 1) elmG = "0" + elmG;
  140. if (elmB.length == 1) elmB = "0" + elmB
  141. elmH = elmH + rate;
  142. if (elmH >= 360)
  143. elmH = 0;
  144. return '#' + elmR + elmG + elmB;
  145. }
  146. //]]>
  147. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement