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
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 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
    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
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,101
    Thanks
    23
    Thanked 594 Times in 593 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
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 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
    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
    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
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 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
    •