Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    BG color change working with color names, but not with Hex RGB values.

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

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by Teufelaffe View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •