Need DOM Help

The code below is a small mock of a larger bit of a project that i am doing.

You will see that i have written a function to set the mouseover and mouseout of the images to set the "colorBar" bg color
to the img bgColor .....

Now what i want to do is also set the forms colorName and colorCode fields with the corresponding

ex

<div class="cname">Tempest Brown</div>
  <div class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>

when you mouse over this image the colorName field should be Tempest Brown and the colorCode field would be 153A

i am sure DOM can do what i want to do by using ?Node but i am not sure on the best way to approach this.

TIA
jAy


<html>
<head>
<title></title>
<script type="text/javascript">
<!--
window.onload = function(){
      if(!document.images){ return; } // not supported
      var img = document.images;
      var colorBar = document.getElementById('colorBar');
            for(var i=0; i<img.length; i++){
                  if(img){
                        if(img[i].getAttribute('width') == '124')
                              img[i].onmouseover = function(){
                                    colorBar.style.backgroundColor = this.style.backgroundColor;
                              }
                              img[i].onmouseout = function(){
                                    colorBar.style.backgroundColor = 'transparent';
                              }
                        }
                  }
            }
}
// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="colorBar" style="margin-left:3px; float:left; width:122px; height:22px; border:1px solid #999; background-color:#ffffff;"></div>
<input type="text" name="colorName">
<input type="text" name="colorCode">
</form>
<br /><br />
  <div class="cname">Tempest Brown</div>
  <div class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
 
  <div class="cname">Flint Black</div>
  <div class="ccode">161A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#000000"></div>

  <div class="cname">Ebony Blue</div>
  <div class="ccode">163A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#3B416B"></div>

</body>
</html>
LVL 16
jaysolomonAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
monolith_888Connect With a Mentor Commented:
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
window.onload = function()
 {
 var nameBox = document.getElementById('cNameB');
 var codeBox = document.getElementById('cCodeB');

 if(!document.images){ return; } // not supported
 var img = document.images;
 var colorBar = document.getElementById('colorBar');
 for(var i=0; i<img.length; i++)
  {
  if(img)
   {
   if(img[i].getAttribute('width') == '124')
    {
    img[i].onmouseover = function()
     {
     colorBar.style.backgroundColor = this.style.backgroundColor;
     var prevNode = this.parentNode.previousSibling;

     nameBox.value =
      (document.all) ?
       prevNode.previousSibling.innerHTML :
       prevNode.previousSibling.previousSibling.previousSibling.innerHTML;
       
     codeBox.value =
      (document.all) ?
       prevNode.innerHTML :
       prevNode.previousSibling.innerHTML;
     }
    img[i].onmouseout = function()
     {
     colorBar.style.backgroundColor = 'transparent';
     }
    }
   }
  }
 }

// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="colorBar" style="margin-left:3px; float:left; width:122px; height:22px; border:1px solid #999; background-color:#ffffff;"></div>
<input type="text" name="colorName" id="cNameB">
<input type="text" name="colorCode" id="cCodeB">
</form>
<br /><br />
  <div class="cname">Tempest Brown</div>
  <div class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
 
  <div class="cname">Flint Black</div>
  <div class="ccode">161A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#000000"></div>

  <div class="cname">Ebony Blue</div>
  <div class="ccode">163A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#3B416B"></div>

</body>
</html>
0
 
jaysolomonAuthor Commented:
and the first line in the script should be

      if(!document.getElementById){ return; } // not supported

TIA
jAy
0
 
jaysolomonAuthor Commented:
ouch

left a { out

window.onload = function(){
      if(!document.getElementById){ return; } // not supported
      var img = document.images;
      var colorBar = document.getElementById('colorBar');
            for(var i=0; i<img.length; i++){
                  if(img){
                        if(img[i].getAttribute('width') == '124'){
                              img[i].onmouseover = function(){
                                    colorBar.style.backgroundColor = this.style.backgroundColor;
                              }
                              img[i].onmouseout = function(){
                                    colorBar.style.backgroundColor = 'transparent';
                              }
                        }
                  }
            }
}
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
ljfernandezConnect With a Mentor Commented:
Here you go:

<html>
<head>
<title></title>
<script type="text/javascript">
<!--
window.onload = function(){
     if(!document.getElementById){ return; } // not supported
     var img = document.images;
     var colorBar = document.getElementById('colorBar');
          for(var i=0; i<img.length; i++){
               if(img){
                    if(img[i].getAttribute('width') == '124'){
                         img[i].onmouseover = function(){
                              colorBar.style.backgroundColor = this.style.backgroundColor;
                                            document.getElementById("colorName").value = this.parentNode.previousSibling.innerText;
                                            document.getElementById("colorCode").value = this.parentNode.previousSibling.previousSibling.innerText;
                         }
                         img[i].onmouseout = function(){
                              colorBar.style.backgroundColor = 'transparent';
                         }
                    }
               }
          }
}

// -->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<div id="colorBar" style="margin-left:3px; float:left; width:122px; height:22px; border:1px solid #999; background-color:#ffffff;"></div>
<input type="text" id="colorName">
<input type="text" id="colorCode">
</form>
<br /><br />

  <div class="cname">Tempest Brown</div>
  <div id="ccode" class="ccode">153A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
 
  <div class="cname">Flint Black</div>
  <div id="ccode" class="ccode">161A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#000000"></div>

  <div class="cname">Ebony Blue</div>
  <div id="ccode" class="ccode">163A</div>
  <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#3B416B"></div>

</body>
</html>
0
 
HaydnHCommented:
FYI:

this.parentNode.previousSibling.innerText And this.parentNode.previousSibling.previousSibling.innerText WON'T work in netscape/mozilla...

Haydn.

0
 
jaysolomonAuthor Commented:
change it to innerHTML and i get the code but not the Name
0
 
HaydnHCommented:
"change it to innerHTML and i get the code but not the Name"

Yeah... I'm stuck about there... almost got a solution - back in 5.

Haydn.
0
 
jaysolomonAuthor Commented:
lol yea i almost got it answered to lol :)

Thanks
jAy
0
 
HaydnHCommented:
Grrr... you can get the colour like this in Mozilla... not sure why Ie doesn't like it =/

//    colorBar.style.backgroundColor = this.style.backgroundColor  <--- your line for reference
      myColor = this.parentNode.parentNode.innerHTML.replace(/<div class="cname">/,"").replace(/<\/div>([\d\D]*)/,"");
      alert(myColor);

Haydn.
0
 
HaydnHCommented:
Sorry - forgot to mention I added a <DIV> around each colour set:

  <div>
    <div class="cname">Tempest Brown</div>
    <div class="ccode">153A</div>
    <div class="ccolor"><img src="color_mask.gif" width="124" height="23" style="cursor:pointer; background-color:#9b404F;"></div>
  </div>

This is so that I can go up to get the innerHTML of this new div instead of the body... I was trying to go back down the div's in to cname and ccode divs but can't for some reason... arrrghhh... can't think straight... I need a break!

Haydn.
0
 
jaysolomonAuthor Commented:
>>/    colorBar.style.backgroundColor = this.style.backgroundColor  <--- your line for reference

i have no trouble in IE or Mozilla getting the bgCOlor, i just cannot get the colorCode or Corlor name
0
 
jaysolomonAuthor Commented:
>>/    colorBar.style.backgroundColor = this.style.backgroundColor  <--- your line for reference

i have no trouble in IE or Mozilla getting the bgCOlor, i just cannot get the colorCode or Corlor name
0
 
jaysolomonAuthor Commented:
sorry for the dbl post...


this works fine in IE but in mozilla two things happen

1 - i am undefined for the colorCode

2 - it puts the code in the name field so therefore it is bassackwards

IE is the way it should be

window.onload = function(){
     if(!document.getElementById){ return; } // not supported
     var img = document.images;
     var colorBar = document.getElementById('colorBar');
          for(var i=0; i<img.length; i++){
               if(img){
                    if(img[i].getAttribute('width') == '124'){
                         img[i].onmouseover = function(){
                              colorBar.style.backgroundColor = this.style.backgroundColor;
                                     document.forms[0].colorname.value = this.parentNode.previousSibling.previousSibling.innerHTML;
                                     document.forms[0].colorcode.value = this.parentNode.previousSibling.innerHTML;
                         }
                         img[i].onmouseout = function(){
                              colorBar.style.backgroundColor = 'transparent';
                         }
                    }
               }
          }
}

0
 
jaysolomonAuthor Commented:
Maybe i am trying to walk the tree the wrong way
0
 
HaydnHCommented:
I've almost got it - gimme 15 mins ;P
0
 
jaysolomonAuthor Commented:
ok here is the larger part of it if you would like to see

http://www.jaysolomon.net/ssc/
0
 
monolith_888Commented:
Got the above to work - for both NN and IE, NN DOM parsing got tricky on us (ljfernandez and myself), but we figured it out.  (She should get an assist :) )

-monolith_888
0
 
HaydnHCommented:
Thank god for that... I just got it working as follows:

  colorBar.style.backgroundColor = this.style.backgroundColor;

  myColor = this.parentNode.parentNode.innerHTML.replace(/<div class=["]?cname["]?>/i, "");
  myColor = myColor.replace(/<\/div>[\r]?[\n]?(.*[\r]?[\n]?)*/i,"");
  myColor = myColor.replace(/[\r]?[\n]?/ig,"");
  document.form1.colorName.value = myColor;


I'm glad you don't need to use this hack =P

Haydn.
0
 
HaydnHConnect With a Mentor Commented:
Oh Mono:

you missed the lines:

    //colorBar.style.backgroundColor = 'transparent'; <--- original line for location ref
    document.form1.colorName.value = "";
    document.form1.colorCode.value = "";

;P

Haydn
0
 
jaysolomonAuthor Commented:
http://www.jaysolomon.net/ssc/

Thanks, i can walk the tree fairly decent but sometimes walking it is like regular expressions, it gets confusing

Thanks
jAy
0
 
monolith_888Commented:
Thanks for the catch HaydnH!

What teamwork we have here!

*wipes tear from eye*

Thanks jaysolomon. :)

0
 
HaydnHCommented:
"regular expressions"

Nah I love regex... been trying to use them as much as possible recently: like above... although it'd be nice if IE and Mozilla returned the same string for .innerHTML - 1 users class="blah" the other uses class=blah, 1 uses <DIV> the other uses <div> - took me ages to realise why it wasn't working in both browsers lol

Haydn.
0
 
jaysolomonAuthor Commented:
great work
If you all keep the team work up you will be up on the HOF with the rest of us in no time

:)))))

jAy
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.