PDA

View Full Version : 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).


<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)


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


<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:


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
A friend sent me this solution:


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.