...

View Full Version : How to script two arrays for a mouseover event?



renzocj
09-01-2011, 06: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, 06: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, 07: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, 08: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, 08: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, 08: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, 08: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-03-2011, 12:23 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 ?

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum