Swap and iframe probs

[sabbas]

Sorry for my bad english. this is my second web work and things are a little bit difficult for me, so sorry if you not understand what i want for this two situations.
First one is that I have 3 links made by 3 small images.
(e.g the links are: videos, music, pics)
These links upload 3 different .html pages in the same iframe depends on which link you click. What i want is when you make a click with mouse on the first link e.g.(videos) i want that link to swap image with different colour. (from white to red)
I have made this with behaviour and its working but my problem is that when i make a click anywhere in the page my image in the link is restore but i want to restore only when I' m gonna click in the other links (music and pics).

Second: if using exactly the same situation as the first one, but when i have a mouse over in the link (e.g videos) I want an image to swap inside the iframe
so the visitor can have a preview of whats inside that menu before clicking on it and load the html page inside the same iframe. In another words something like "swap 2 html in an iframe with on mouse over in the link" :-)

I will appreciate any help
thanks..

[acoder]

Post your code or a link.

[sabbas]

Post your code or a link.

[HTML]<table width="600" height="427" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="234" height="427" align="left" valign="top" scope="col"><table width="224" height="298" border="0" cellpadding="0" cellspacing="0">
<tr>
<th scope="col"><table width="100" height="309" border="0" align="left" cellpadding="0" cellspacing="12">
<tr>
<th width="175" scope="col"><img src="buttons/location1.gif" width="122" height="21" border="0" usemap="#Map8" id="Image1">
<map name="Map8">
<area shape="rect" coords="3,2,66,19" href="villages.html" target="locations" alt="">
</map></th>
</tr>
<tr>
<th scope="row"><img src="buttons/location2.gif" name="image2" width="122" height="21" border="0" usemap="#Map10" id="image2">
<map name="Map10">
<area shape="rect" coords="2,2,65,20" href="islands.html" target="locations">
</map> </th>
</tr>
<tr>
<th scope="row"><img src="buttons/location3.gif" width="122" height="21" border="0" usemap="#Map11"></th>
</tr>
<tr>
<th scope="row"><p align="left" class="style15"><img src="buttons/location4.gif" width="122" height="21" border="0" usemap="#Map12"></p></th>
</tr>
<tr>
<th scope="row"><img src="buttons/location5.gif" width="122" height="21" border="0" usemap="#Map13"></th>
</tr>
<tr>
<th scope="row"><img src="buttons/location6.gif" width="122" height="21" border="0" usemap="#Map15"></th>
</tr>
<tr>
<th scope="row"><img src="buttons/location7.gif" width="122" height="21" border="0" usemap="#Map16"></th>
</tr>
<tr>
<th scope="row"><img src="buttons/location8.gif" width="122" height="21" border="0" usemap="#Map14"></th>
</tr>
<tr>
<th scope="row"><img src="buttons/location9.gif" width="122" height="21"></th>
</tr>
</table></th>
</tr>
</table></th>
<th width="366" align="left" valign="top" scope="col"><a href="images/244.jpg"></a>
<table width="366" height="459" border="0" cellpadding="0" cellspacing="0">
<tr>
<th align="left" valign="top" scope="col"><p>
<iframe src="mainlocation.html" name="locations" width="366" marginwidth="0" height="459" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
<br>
</p></th>
</tr>
</table></th>
</tr>
</table>[/HTML]