How to script two arrays for a mouseover event?

renzocj · 09-01-2011, 05:14 PM

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.

DaveyErwin · 09-01-2011, 05:41 PM

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

DanInMa · 09-01-2011, 06:56 PM

names are deprecated on everything except form elements anyway. using a name on a div is useless, use ID's!

sunfighter · 09-01-2011, 07:00 PM

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>

DaveyErwin · 09-01-2011, 07:33 PM

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>

renzocj · 09-02-2011, 07:17 AM

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.

renzocj · 09-02-2011, 07:25 AM

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 ?

DaveyErwin · 09-02-2011, 11:23 PM

Quote:

Originally Posted by renzocj

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.