onMouseOut question

So, this is kind of a strange issue I’ve come across…

I have an include file on several pages and it looks something like this:

[code]<!– DROP DOWN –>
<ul id=”MenuBar1″ class=”MenuBarHorizontal”>
<li><a class=”MenuBarItemSubmenu” style=”text-align:center; font-size:1.1em; color:#333; background-image:url(/includes/SpryAssets/SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%;”>Collections</a>
<ul>
<li><a class=”MenuBarItemSubmenu” href=”bella_rosa.html” onMouseOver=”document.getElementById(‘set’).src=’images/bonami.jpg’;”>Bella Rosa</a>
<ul style=”margin-top:-1px;”>
<li><a href=”mission.html” onMouseOver=”document.getElementById(‘set’).src=’images/mission.jpg’;”>Mission</a></li>
<li><a href=”modavi_wicker.html” onMouseOver=”document.getElementById(‘set’).src=’images/mondavi_wicker.jpg’;”>Mondavi</a></li>
<li><a href=”palermo.html” onMouseOver=”document.getElementById(‘set’).src=’images/mondavi_wicker.jpg’;”>Palermo</a></li>
<li><a href=”portofino.html” onMouseOver=”document.getElementById(‘set’).src=’images/portofino.jpg’;”>Portofino</a></li>
<li><a href=”rockford.html” onMouseOver=”document.getElementById(‘set’).src=’images/portofino.jpg’;”>Rockford</a></li>
<li><a href=”san_miguel.html” onMouseOver=”document.getElementById(‘set’).src=’images/san_miguel.jpg’;”>San Miguel</a></li>
<li><a href=”scottsdale.html” onMouseOver=”document.getElementById(‘set’).src=’images/scottsdale.jpg’;”>Scottsdale</a></li>
<li><a href=”sonoita.html” onMouseOver=”document.getElementById(‘set’).src=’images/sonoita.jpg’;”>Sonoita</a></li>
<li><a href=”stratford.html” onMouseOver=”document.getElementById(‘set’).src=’images/stratford.jpg’;”>Stratford</a></li>
<li><a href=”tucson.html” onMouseOver=”document.getElementById(‘set’).src=’images/tucson.jpg’;”>Tucson</a></li>
<li><a href=”valencia.html” onMouseOver=”document.getElementById(‘set’).src=’images/valencia.jpg’;”>Valencia</a></li>
<li><a href=”ventura.html” onMouseOver=”document.getElementById(‘set’).src=’images/ventura.jpg’;”>Ventura</a></li>
</ul>
</li>
<li><a href=”bonami.html” onMouseOver=”document.getElementById(‘set’).src=’images/bonami.jpg’;”>Bonami</a></li>
<li><a href=”camden.html” onMouseOver=”document.getElementById(‘set’).src=’images/camden.jpg’;”>Camden</a></li>
<li><a href=”casa_grande.html” onMouseOver=”document.getElementById(‘set’).src=’images/casa_grande_dining.jpg’;”>Casa Grande</a></li>
<li><a href=”catalina.html” onMouseOver=”document.getElementById(‘set’).src=’images/catalina.jpg’;”>Catalina</a></li>
<li><a href=”chatham.html” onMouseOver=”document.getElementById(‘set’).src=’images/chatham.jpg’;”>Chatham</a></li>
<li><a href=”del_norte.html” onMouseOver=”document.getElementById(‘set’).src=’images/del_norte.jpg’;”>Del Norte</a></li>
<li><a href=”el_camino.html” onMouseOver=”document.getElementById(‘set’).src=’images/del_norte.jpg’;”>El Camino</a></li>
<li><a href=”falicia.html” onMouseOver=”document.getElementById(‘set’).src=’images/falicia.jpg’;”>Falicia</a></li>
<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>
</li>
</ul>
<!– END DROP DOWN –>[/code]

And on my each page:
<img src=”images/bella_rose.jpg” alt=”Veranda Classics Collections” id=”set”>
or
<img src=”images/bonami.jpg” alt=”Veranda Classics Collections” id=”set”>
etc…

Ideally, I would have an onMouseOut=”…” that would make it go back to the default image. So if I were on bonami.html, when I moused out it would act like:

[code]<li><a href=”mission.html” onMouseOver=”document.getElementById(‘set’).src=’images/mission.jpg’;” [B]onMouseOut=”document.getElementById(‘set’).src=’images/bonami.jpg’;”[/B]>Mission</a></li>
<li><a href=”modavi_wicker.html” onMouseOver=”document.getElementById(‘set’).src=’images/mondavi_wicker.jpg’;” [B]onMouseOut=”document.getElementById(‘set’).src=’images/bonami.jpg’;”[/B]>Mondavi</a></li>
<li><a href=”palermo.html” onMouseOver=”document.getElementById(‘set’).src=’images/mondavi_wicker.jpg’;” [B]onMouseOut=”document.getElementById(‘set’).src=’images/bonami.jpg’;”[/B]>Palermo</a></li>
..etc…[/code]

But since this is an include file, I can’t do that…

I was hoping that some way, I can include a thing of JS in the head of each page that would write this in.

Is that even possible? Did that even make sense? Or do you think there’s a better way I can do this?

Thanks so much for any help…

Also in #JavaScript _↴