Mouseover behavior in CSS/JS?

[aranaxon]

based from my thread at Hardforum

I have a pair of DHTML menus right now, and when I mouseover the individual links in the menu, I want a different image (per link!) to load in a seperate DIV upon mouseover. (I'm having positioning issues also, but that is a seperate problem)

I know how to do it if i wanted one static image to appear upon mouseover of the different links, but not sure how to implement a diff image for each link. Dynamic determination of the source, so to speak.

Can someone give me a few pointers on how to do this? (my intuition says JS, but I don't know how to write the code - something perhaps vaguely involving a variable that is switched upon mouseover, and that variable determining the IMG SRC that appears within the seperate div.

I've been working on this for a few days to make a presentation a little better (so no one here does web-work, its an engineering group) and its starting to frustrate me.

I can post an example of what I got if that would help.

THANKS IN ADVANCE !

 

[statik213]

See below.

 

[aranaxon]

I'll try it, if this works you are my fav poster du jour.

 

[aranaxon]

with regard to this:

 

[statik213]

Yup... that should work.
And if you look at the way I suggested the two functions you can afford to have multiple div-img targets to change for different links.....

 

[aranaxon]

still having some problems, here is the xample code I am using:

 

[statik213]

Originally posted by: aranaxon
still having some problems, here is the xample code I am using:

OK, lemme take a look at it. FYI HTML comments are like this:
<!-- comment -->
I noticed that you were doing this: <!-- comment !--> which means taht you weren't terminating your comments.... it's would effectively wipe out the page below your first such comment.

 

[aranaxon]

Thanks Statik, I fixed the problem(s) that were present. I may have made some syntax errors or something, but I got help and fixed it

onto my positioning problem now! yay

 

[statik213]

Noticed a few syntax errors (and the comment problem ^^^^)
this:
<li><a href="P1/P1-Assumptions.xls" onMouseover='setImg("P0-R.jpg","IMAGE")'; ....
should be:
<li><a href="P1/P1-Assumptions.xls" onMouseover='setImg("P0-R.jpg","IMAGE");' ....


The ' and " are important and it's important to nest them accordingly.
You can do this onmouseover='foo("some string");' or onmouseover="foo('some string');"
and this:
onmouseover='foo("some string with \"quotes\" and more \'quotes\'");'

it's also important to have ; within the quotes for the event string (can't think of a better name for it, i.e. onmouseover="event string".... placing it outside like you had is meaning less. I've seen JS work without the ; at the end of an event string but I don't think not having it is a good idea.


Working example below:

 

[statik213]

Originally posted by: aranaxon
Thanks Statik, I fixed the problem(s) that were present. I may have made some syntax errors or something, but I got help and fixed it

onto my positioning problem now! yay

oh well, look at my post ^^^

 

[aranaxon]

I ended up defining everything, so that the browser wouldn't make any mistakes, e.g.

 

[statik213]

Originally posted by: aranaxon
I ended up defining everything, so that the browser wouldn't make any mistakes, e.g.

Dude, still messing up the ' and ; read my post ^^^