Web Analytics Made Easy -
StatCounter How to script two arrays for a mouseover event? - CodingForum

Announcement

Collapse
No announcement yet.

How to script two arrays for a mouseover event?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to script two arrays for a mouseover event?

    I know this maybe sounds "newbie", perhaps I am still one.

    I have 3 divs, all of them in a group "name", there are h1 tags inside them with names too. Well actually I have many many divs like this in several pages so I must use a JS sheet (.js).

    Code:
    <div name="area"> <h1 name="stringRed"> Mercury </h1> </div>
    <div name="area"> <h1 name="stringRed"> Venus </h1> </div>
    <div name="area"> <h1 name="stringRed"> Earth </h1> </div>
    The idea is to create an event for the divs, a mouseover event to a div in order to change the color of the words inside the h1 tags. When the mouse is over one particular div the word inside it must change to red.

    I was trying this Java Script script:

    (a cross-browser event handler present)

    Code:
        function initialize ( ) {
        aArea=document.getElementsByName("area");
        aStringRed=document.getElementsByName("stringRed");
    
        for (var i=0; i < aArea.length; i++) {
        addEvent (aArea[i], 'mouseover', changeColor);
        addEvent (aArea[i], 'mouseout', changeOutColor);
        }
        }
    
        function changeColor() {
        ????
        }
        function changeOutColor() {
        ????
        }
    Thank you in advanced for any help.

  • #2
    Is there a reason you have given them names only
    and no ids ? Giving them an id is the "normal" way
    to go, the names are okay for grouping but, each
    one should probably have a unique id also. You can
    do what you describe without the ids but thats
    not the "normal way" .

    Comment


    • #3
      names are deprecated on everything except form elements anyway. using a name on a div is useless, use ID's!
      - Firebug is a web developers best friend! - Learn it, Love it, use it!
      - Validate your code! - JQ/JS troubleshooting
      - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

      Comment


      • #4
        Code:
        <!DOCTYPE HTML>
        <html>
        <head>
        <script type="text/javascript">
        function newb(stf){
        	document.getElementById(stf).style.color = 'red';
        }
        function newc(stf){
        	document.getElementById(stf).style.color = 'black';
        }
        </script>
        </head>
        <body >
        <div id="1"> <h1 onmouseover="newb('1');" onmouseout="newc('1');"> Mercury </h1> </div>
        <div id="2"> <h1 onmouseover="newb('2');" onmouseout="newc('2');"> Venus </h1> </div>
        <div id="3"> <h1 onmouseover="newb('3');" onmouseout="newc('3');"> Earth </h1> </div>
        </body>
        </html>
        Evolution - The non-random survival of random variants.
        Physics is actually atoms trying to understand themselves.

        Comment


        • #5
          It ain't purdy but,
          it woeks with ie8 and firefox6.

          Code:
          <script type="text/javascript">
          
          addEvent = function(target, event, method) {
          	if (target.addEventListener) {
          		target.addEventListener(event, method, false);
          	} else if (target.attachEvent) {
          		target.attachEvent("on" + event, method);
          	}
          }
          
          function initialize ( ) {   
              evryThng=document.getElementsByTagName("*");
              for(i=evryThng.length;i--;){
          	if(evryThng[i].name == "area1"){
          	    addEvent (evryThng[i], 'mouseover', changeColor);
              	    addEvent (evryThng[i], 'mouseout', changeOutColor);
          	    }
              }
              aArea=document.getElementsByName("area1");
              aStringRed=document.getElementsByName("stringRed");
              for (var i=0; i < aArea.length; i++) {
              	addEvent (aArea[i], 'mouseover', changeColor);
              	addEvent (aArea[i], 'mouseout', changeOutColor);
              	}
              }
          
              function changeColor(e) {
              e = e || window.event;
              target = e.target || window.event.srcElement;
              target.style.color = "red";
              }
              function changeOutColor(e) {
              e = e || window.event;
              target = e.target || window.event.srcElement;
              target.style.color = "black";
              }
                  </script>
          
          <body onload="initialize ( )">
          <div name="area1"> <h1 name="stringRed"> Mercury </h1> </div>
          <div name="area1"> <h1 name="stringRed"> Venus </h1> </div>
          <div name="area1"> <h1 name="stringRed"> Earth </h1> </div>
          </body>

          Comment


          • #6
            Yes, the reason was because there are several divs (no just 3), there are 10 divs repeating in several other pages so the idea was to give them a "name" to later create a simple array in js using the "getElementsByName()". It's best that work width 10 Id's.

            Comment


            • #7
              A friend sent me this solution:

              Code:
              function initialize ( ) {
              
                  var aArea=document.getElementsByName("area");
                  for (var i=0; i < aArea.length; i++) {
                  aArea[i].addEventListener('mouseover', changeColor);
                  aArea[i].addEventListener('mouseout', changeOutColor);
                  }
               }
              
                  function changeColor() {
                  this.childNodes[1].style.color="red";
                  }
                  function changeOutColor(divObj) {
                  this.childNodes[1].style.color="black";
                  }
              What do you think ? simple ?

              Comment


              • #8
                Originally posted by renzocj View Post
                A friend sent me this solution:

                Code:
                function initialize ( ) {
                
                    var aArea=document.getElementsByName("area");
                    for (var i=0; i < aArea.length; i++) {
                    aArea[i].addEventListener('mouseover', changeColor);
                    aArea[i].addEventListener('mouseout', changeOutColor);
                    }
                 }
                
                    function changeColor() {
                    this.childNodes[1].style.color="red";
                    }
                    function changeOutColor(divObj) {
                    this.childNodes[1].style.color="black";
                    }
                What do you think ? simple ?
                I think it doen't work in ie8 and below
                but it works in firefox.
                Check out my other post in this thread for one
                that works in mostl browsers.

                Comment

                Working...
                X