Simple onMouseOut script (I hope)

Hi,

I'm not great with JS, but I have a basic understanding of it, and this should [hopefully] be simple...

What I'm looking to do is to have a script in the head section of my pages that would apply an onmouseout to certain elements.

Basically, I have code like this:

<ul>
  <li><a href="geneva.html" onMouseOver="document.getElementById('set').src='images/falicia.jpg';">Geneva</a></li>
  <li><a href="hidalgo_dining.html" onMouseOver="document.getElementById('set').src='images/hidalgo_dining.jpg';">Hidalgo</a></li>
  <li><a href="mandera.html" onMouseOver="document.getElementById('set').src='images/mandera.jpg';">Mandera</a></li>
</ul>

HTML:

And I need to dynamically add something like this to every <a href ...>:
onMouseOut="document.getElementById('set').src='images/default_set.jpg';"

Is that even possible?

Thanks so much for any help.

 

Yes, that is possible. You can add the onmouseout after the onmouseover:
<a href="geneva.html" onmouseover="document.getElementById('set').src='images/falicia.jpg'" onmouseout="document.getElementById('set').src='images/other.jpg';">

But that is a lot of coding. I would suggest you look into jquery. The same code can then be written in a few lines.

 

yeah, i needed that to be done dynamically though (the list of links is going to be in an include file), so for each page the image would have to change back to the default. in other words, this was in the include file:

<ul>
  <li><a href="geneva.html" onMouseOver="document.getElementById('set').src='images/falicia.jpg';">Geneva</a></li>
  <li><a href="hidalgo_dining.html" onMouseOver="document.getElementById('set').src='images/hidalgo_dining.jpg';">Hidalgo</a></li>
  <li><a href="mandera.html" onMouseOver="document.getElementById('set').src='images/mandera.jpg';">Mandera</a></li>
</ul>

Code (markup):

(but 26 of these links)

And when you were on geneva.html it would have to switch to geneva.jpg onmouseout.

I did find a solution though...

I added this to each page:

<script type="text/javascript">
function set_default() {
    document.getElementById('set').src='[I]images/geneva.jpg[/I]';
}
</script>

Code (markup):

and this to each link on the include file:
onMouseOut="set_default(); return false"

It worked out perfectly!

In any case, I appreciate your help.