Back To Programming / Scripting / Coding Forum

Help with adding a function to some javascript

  • b_zilla
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 20, 2008
  • Posts: 12
  • Loc: Seattle, WA
  • Status: Offline

Post April 18th, 2011, 7:06 pm

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>
  3. <html><head><title></title>
  4. <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
  5. <script language=javascript>
  7. colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
  11. cRGB = [];
  15. function toRGB(color){
  16.  
  17. var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
  18.  
  19. return rgb;
  21. }
  25. for(var i=0; i<colors.length; i++){
  26.  
  27. cRGB[i] = toRGB(colors[i]);
  28. }
  32. function changeColor(target){
  34.  
  36. var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
  38.  
  40. var set = false;
  41.  
  42. var xx;
  44.  
  46. for(var i=0; i<cRGB.length; i++){
  48.    
  50. if(swapper == cRGB[i]){
  52.     
  54. if(((i+1)) >= cRGB.length){
  55.       
  56. xx = 0;
  57.     
  58. }else{
  59.       
  60. xx = i+1;
  61.     
  62. }
  64.     
  66. document.getElementById(target).style.backgroundColor = colors[xx];
  68.         document.getElementById(target).style.backgroundImage.show;
  70.     
  71. set = true;
  72.     
  73. i=cRGB.length;
  74.    
  75. }
  76.  
  77. }
  78.  
  80. set ? null : document.getElementById(target).style.backgroundColor = colors[1];
  82. }
  85. </SCRIPT>
  87. <meta content="MSHTML 6.00.6000.16809" name=GENERATOR></head>
  88. <body bgcolor="333333">
  89. <div>
  90. <div id=a1 onmouseover=changeColor(thisDOTid);
  91. style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
  92. <div id=a2 onmouseover=changeColor(thisDOTid);
  93. style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
  94. <div id=a3 onmouseover=changeColor(thisDOTid);
  95. style="left: 120px; width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
  98. </body>
  99. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 18th, 2011, 7:06 pm

  • Zealous
  • Guru
  • Guru
  • User avatar
  • Joined: Apr 15, 2011
  • Posts: 1195
  • Loc: Sydney
  • Status: Offline

Post April 19th, 2011, 1:14 am

you really need to fix your bbtags lol
  • b_zilla
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 20, 2008
  • Posts: 12
  • Loc: Seattle, WA
  • Status: Offline

Post April 21st, 2011, 12:45 pm

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
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Oct 20, 2008
  • Posts: 12
  • Loc: Seattle, WA
  • Status: Offline

Post April 27th, 2011, 3:47 pm

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
  • No Avatar
  • Joined: Apr 15, 2011
  • Posts: 25
  • Status: Offline

Post April 27th, 2011, 6:53 pm

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>
  4. <script>
  5. var e = document.getElementById("urgent");
  6. var colors = ["white","black","orange", "red", "blue", "purple"]    //colors to cycle through (array)
  7. var nextColor = 0;                            //position in the cycle
  8. // Invoke the following function every 500 milliseconds to animate border color
  9. setInterval(function(){e.style.color=colors[nextColor++%colors.length];},500)//setInterval() is kind like a loop, also ++% is a interesting operator combination
  10. </script>

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 124 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
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.