...

View Full Version : BG color change working with color names, but not with Hex RGB values.



Teufelaffe
02-25-2007, 10:58 PM
I have a fairly simple mouse-over color toggle function that is behaving rather strangely. If I use the names of the colors invlovled, the code works as it should. However, if I replace the names with the Hexidecimal RGB equivellent, "red" into "#FF0000" for instance, it only changes the color on the initial mouse-over and no longer changes after that.

Here is the functioning code:


<style>
div
{
position: relative;
border: 1px solid;
cursor: pointer;
width: 170;
}
</style>
<script>
function colorHover(id)
{
var colorArray =
{
redBlue : ["red", "blue"],
blueGreen : ["blue", "green"],
greenRed : ["green", "red"]
}
var currentColor = document.getElementById(id).style.backgroundColor;
var colorSet = document.getElementById(id).className;
if(currentColor == colorArray[colorSet][0])
{
document.getElementById(id).style.backgroundColor = colorArray[colorSet][1];
}
else
{
document.getElementById(id).style.backgroundColor = colorArray[colorSet][0];
}
}
</script>
<div id="button1" class="redBlue" style="background-color: blue" onMouseOver="colorHover(this.id)" onMouseOut="colorHover(this.id)">Should toggle Blue/Red</div>
<div id="button2" class="blueGreen" style="background-color: green" onMouseOver="colorHover(this.id)" onMouseOut="colorHover(this.id)">Should toggle Green/Blue</div>
<div id="button3" class="greenRed" style="background-color: red" onMouseOver="colorHover(this.id)" onMouseOut="colorHover(this.id)">Should toggle Red/Green</div>


If you take that code and replace the color names to the Hex versions, red -> #FF0000, green -> #00FF00 and blue -> #0000FF, each div will change colors on the first mouse-over and will no longer change after that.

I want to be able to use this for colors other than the named colors, but this one is making my brain hurt.

Arty Effem
02-26-2007, 03:14 AM
I have a fairly simple mouse-over color toggle function that is behaving rather strangely. If I use the names of the colors invlovled, the code works as it should. However, if I replace the names with the Hexidecimal RGB equivellent, "red" into "#FF0000" for instance, it only changes the color on the initial mouse-over and no longer changes after that.

A quick alert reveals that the format in which those values is specified, has no bearing on the way they are returned. Mozilla returns rgb(n,n,n);
I recommend that you use className switching/comparison only.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum