Help with adding a function to some javascript

  • b_zilla
  • Novice
  • Novice
  • b_zilla
  • Posts: 15
  • Loc: Seattle, WA

Post 3+ Months Ago

This script will rotate thru a series of bg colors upon rollover.

What I hope to do is call up more than one set of colors, that is, separate color palettes... Either by use of a different id or calling a function with a different name.

Any help would be hugely appreciated.

PS. please replace (DOT) with a "." in three places at the end of the script...sorry, couldn't figure out the proper tag

Code: [ Select ]


<html><head><title></title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<script language=javascript>

colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];



cRGB = [];



function toRGB(color){
 
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
 
return rgb;

}



for(var i=0; i<colors.length; i++){
 
cRGB[i] = toRGB(colors[i]);
}



function changeColor(target){

 

var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;

 

var set = false;
 
var xx;

 

for(var i=0; i<cRGB.length; i++){

   

if(swapper == cRGB[i]){

    

if(((i+1)) >= cRGB.length){
      
xx = 0;
    
}else{
      
xx = i+1;
    
}

    

document.getElementById(target).style.backgroundColor = colors[xx];

        document.getElementById(target).style.backgroundImage.show;

    
set = true;
    
i=cRGB.length;
   
}
 
}
 

set ? null : document.getElementById(target).style.backgroundColor = colors[1];

}


</SCRIPT>

<meta content="MSHTML 6.00.6000.16809" name=GENERATOR></head>
<body bgcolor="333333">
<div>
<div id=a1 onmouseover=changeColor(thisDOTid);
style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(thisDOTid);
style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(thisDOTid);
style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>


</body>
</html>
  1. <html><head><title></title>
  2. <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
  3. <script language=javascript>
  4. colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
  5. cRGB = [];
  6. function toRGB(color){
  7.  
  8. var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
  9.  
  10. return rgb;
  11. }
  12. for(var i=0; i<colors.length; i++){
  13.  
  14. cRGB[i] = toRGB(colors[i]);
  15. }
  16. function changeColor(target){
  17.  
  18. var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
  19.  
  20. var set = false;
  21.  
  22. var xx;
  23.  
  24. for(var i=0; i<cRGB.length; i++){
  25.    
  26. if(swapper == cRGB[i]){
  27.     
  28. if(((i+1)) >= cRGB.length){
  29.       
  30. xx = 0;
  31.     
  32. }else{
  33.       
  34. xx = i+1;
  35.     
  36. }
  37.     
  38. document.getElementById(target).style.backgroundColor = colors[xx];
  39.         document.getElementById(target).style.backgroundImage.show;
  40.     
  41. set = true;
  42.     
  43. i=cRGB.length;
  44.    
  45. }
  46.  
  47. }
  48.  
  49. set ? null : document.getElementById(target).style.backgroundColor = colors[1];
  50. }
  51. </SCRIPT>
  52. <meta content="MSHTML 6.00.6000.16809" name=GENERATOR></head>
  53. <body bgcolor="333333">
  54. <div>
  55. <div id=a1 onmouseover=changeColor(thisDOTid);
  56. style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
  57. <div id=a2 onmouseover=changeColor(thisDOTid);
  58. style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
  59. <div id=a3 onmouseover=changeColor(thisDOTid);
  60. style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
  61. </body>
  62. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1240
  • Loc: Sydney

Post 3+ Months Ago

you really need to fix your bbtags lol
  • b_zilla
  • Novice
  • Novice
  • b_zilla
  • Posts: 15
  • Loc: Seattle, WA

Post 3+ Months Ago

Sorry...the door is slammed shut on anything that resembles a link. Would be great to post a useful working demo of this script, but I can't post the link for it.
  • b_zilla
  • Novice
  • Novice
  • b_zilla
  • Posts: 15
  • Loc: Seattle, WA

Post 3+ Months Ago

Solved! Thanks and gratitude goes to rproctor83

Code: [ Select ]
<script language=javascript>
var colors = [
  ["#ff0000", "#0000ff", "#0F00F0", "#999999", "#000000"],
  ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"]
];
function changeColor(target, colorGroup){
  var color = colors[colorGroup][(Math.floor(Math.random()*colors[colorGroup].length))];
  target.style.background = color;
}
</SCRIPT>
<div class="divBackground" onMouseOver="javascript:changeColor(this, 0)">
  &nbsp;
</div>
<div class="divBackground" onMouseOver="javascript:changeColor(this, 1)">
  &nbsp;
</div>
<div class="divBackground" onMouseOver="javascript:changeColor(this, 0)">
  &nbsp;
</div>
  1. <script language=javascript>
  2. var colors = [
  3.   ["#ff0000", "#0000ff", "#0F00F0", "#999999", "#000000"],
  4.   ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"]
  5. ];
  6. function changeColor(target, colorGroup){
  7.   var color = colors[colorGroup][(Math.floor(Math.random()*colors[colorGroup].length))];
  8.   target.style.background = color;
  9. }
  10. </SCRIPT>
  11. <div class="divBackground" onMouseOver="javascript:changeColor(this, 0)">
  12.   &nbsp;
  13. </div>
  14. <div class="divBackground" onMouseOver="javascript:changeColor(this, 1)">
  15.   &nbsp;
  16. </div>
  17. <div class="divBackground" onMouseOver="javascript:changeColor(this, 0)">
  18.   &nbsp;
  19. </div>
  • baligena
  • Novice
  • Novice
  • baligena
  • Posts: 25

Post 3+ Months Ago

The code uses the setInterval to loop thru the colors

Code: [ Select ]
<p id="urgent">animiation using css and javascript setInterval()</p>


<script>
var e = document.getElementById("urgent");
var colors = ["white","black","orange", "red", "blue", "purple"]    //colors to cycle through (array)
var nextColor = 0;                            //position in the cycle
// Invoke the following function every 500 milliseconds to animate border color
setInterval(function(){e.style.color=colors[nextColor++%colors.length];},500)//setInterval() is kind like a loop, also ++% is a interesting operator combination
</script>
  1. <p id="urgent">animiation using css and javascript setInterval()</p>
  2. <script>
  3. var e = document.getElementById("urgent");
  4. var colors = ["white","black","orange", "red", "blue", "purple"]    //colors to cycle through (array)
  5. var nextColor = 0;                            //position in the cycle
  6. // Invoke the following function every 500 milliseconds to animate border color
  7. setInterval(function(){e.style.color=colors[nextColor++%colors.length];},500)//setInterval() is kind like a loop, also ++% is a interesting operator combination
  8. </script>

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 144 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.