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 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2011
    Location
    Lima, Peru
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 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. #2
    Senior Coder
    Join Date
    Aug 2010
    Posts
    1,112
    Thanks
    30
    Thanked 246 Times in 244 Posts
    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" .

  3. #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    names are deprecated on everything except form elements anyway. using a name on a div is useless, use ID's!

  4. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,287
    Thanks
    30
    Thanked 863 Times in 861 Posts
    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>

  5. #5
    Senior Coder
    Join Date
    Aug 2010
    Posts
    1,112
    Thanks
    30
    Thanked 246 Times in 244 Posts
    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>

  6. #6
    New Coder
    Join Date
    Sep 2011
    Location
    Lima, Peru
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  7. #7
    New Coder
    Join Date
    Sep 2011
    Location
    Lima, Peru
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 ?

  8. #8
    Senior Coder
    Join Date
    Aug 2010
    Posts
    1,112
    Thanks
    30
    Thanked 246 Times in 244 Posts
    Quote 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.


 

Tags for this Thread

Posting Permissions

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