How to script two arrays for a mouseover event?

[renzocj]

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, 'mouseover', changeColor);
addEvent (aArea, 'mouseout', changeOutColor);
}
}

function changeColor() {
????
}
function changeOutColor() {
????
}

Thank you in advance for any help or advice

 

[vacunita]

Any reason you don;t just use a CSS pseudo class like:

div h1:hover{
color:red;
}

If you must do it in javascript, I'd use the "this" reference for the object being hovered into, in the function to change the color.

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";
    }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[renzocj]

Thanks Vacunita

The CSS pseudo class was not an option because the control was over the div to change a color over a h1 tag. The idea is to make a script in order to change the color of the words inside the h1 tags when someone put his(her) mouse over the div.

However, thank you for the JavaScript option it seems that you solve it for me.

 

[feherke]

Hi

Sounds like you only need to change the pseudo class :

div[teal]:[/teal]hover h1 [teal]{[/teal]
  [COLOR=coral]color:[/color] [COLOR=darkgoldenrod]red[/color];
[teal]}[/teal]

Note that childNodes[1] will not work in older Explorer ( maybe neither in newer ones ), as those skipped the whitespaces when referencing the child nodes. ( The Whitespace in the DOM section in SitePoint's DOM Core article explains it better. )

Taking in consideration that adding [tt]name[/tt] attribute for [tt]div[/tt] and [tt]h1[/tt] is invalid HTML, I suggest to change them to [tt]class[/tt]. So if you want a JavaScript solution, the syntactically correct and somehow portable ( [tt]addEventListener()[/tt] is available in Explorer only since version 9, older versions used [tt]attachEvent()[/tt] ) rewrite would be this :

[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"area"[/i][/green][b]>[/b] [b]<h1[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"stringRed"[/i][/green][b]>[/b] Mercury [b]</h1>[/b] [b]</div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"area"[/i][/green][b]>[/b] [b]<h1[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"stringRed"[/i][/green][b]>[/b] Venus [b]</h1>[/b] [b]</div>[/b]
[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"area"[/i][/green][b]>[/b] [b]<h1[/b] [maroon]class[/maroon][teal]=[/teal][green][i]"stringRed"[/i][/green][b]>[/b] Earth [b]</h1>[/b] [b]</div>[/b]

[b]function[/b] [COLOR=darkgoldenrod]initialize[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] aArea [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementsByClassName[/color][teal]([/teal][green][i]"area"[/i][/green][teal]);[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal];[/teal] i [teal]<[/teal] aArea[teal].[/teal]length[teal];[/teal] i[teal]++)[/teal] [teal]{[/teal]
    aArea[teal][[/teal]i[teal]].[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'mouseover'[/i][/green][teal],[/teal] changeColor[teal]);[/teal]
    aArea[teal][[/teal]i[teal]].[/teal][COLOR=darkgoldenrod]addEventListener[/color][teal]([/teal][green][i]'mouseout'[/i][/green][teal],[/teal] changeOutColor[teal]);[/teal]
  [teal]}[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]changeColor[/color][teal]()[/teal]
[teal]{[/teal]
  [b]this[/b][teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'h1'[/i][/green][teal])[[/teal][purple]0[/purple][teal]].[/teal]style[teal].[/teal]color[teal]=[/teal][green][i]"red"[/i][/green][teal];[/teal]
[teal]}[/teal]

[b]function[/b] [COLOR=darkgoldenrod]changeOutColor[/color][teal]([/teal]divObj[teal])[/teal]
[teal]{[/teal]
  [b]this[/b][teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'h1'[/i][/green][teal])[[/teal][purple]0[/purple][teal]].[/teal]style[teal].[/teal]color[teal]=[/teal][green][i]"black"[/i][/green][teal];[/teal]
[teal]}[/teal]

As a conclusion, I would definitely go with the CSS solution.


Feherke.

http://free.rootshell.be/~feherke/

 

[renzocj]

Amazing answer, thank you Feherke!