swap images with CSS

im having a problem with the swap image in the css

i got a menu created with tables and interactive with CSS.

how do i make swap the images

here the Menu css code

#Menutopo {
background-image: url(menutopo3.jpg);
background-repeat: no-repeat;
height: 111px;
width: 181px;
text-align:center;


}

#MenuMeio {
background-image: url(menumeio3.JPG);
background-repeat:repeat;
text-align:center;
width: 181px;
font-family: Verdana, Arial, Helvetica, sans-serif;
/* padding: 1px;*/
color:#000000;
}
#MenuBase {
background-image: url(Menufundo2.jpg);
background-repeat: no-repeat;
height: 36px;
width: 181px;

}

and the menu html code:

The Menu:

<td align="center" id="MenuMeio">
<p><a href="Index.html"><font face="ninja Naruto">Home</font></a></p>
<p><a href="Historia.html"><font face="ninja Naruto">Scrolls</font></a></p>
<p><a href="Membros.html"><font face="ninja Naruto">Decks</font></a></p>
<p><a href="Recrutamento.html"><font face="ninja Naruto">Jumbo</font></a></p>
<p> <a href="PCW.html"><font face="ninja Naruto"> Coin</font></a></p>
<p> <a href="torneios.html"><font face="ninja Naruto"> Can</font></a></p>
<p> <a href="Videos.html"><font face="ninja Naruto">Promo Cards </font></a></p>
<p><span class="style2"><a href="Videos.html">Others</a></span></p>
<p><span class="style3"><a href="Videos.html">Trade</a></span></p>
<p class="style3"><a href="Videos.html">Missing</a></p>
<p> <a href="mailto:kof20012@hotmail.com?subject=Guns Fighters Clan"><font face="ninja Naruto">Contacta-nos</font></a></p>
<p></p>
</td>

here it is an example what i want it
http://pwp.netcabo.pt/narutocards/teste.gif

the shiruken's its the image i want to appear when i just pass by with the mouse on the link

regards

 

You want no shiruken unless the mouse hovers over the list?

You have <a href="...">stuff in your menu. They can be set in CSS to change when the mouse is over them.

First you set how they should look without mouse:

#MenuMeio a, MenuMeio a:link, #MenuMeio a:visited {
whatever other code you want goes here, but no background image
}

#MenuMeio a:hover {
background: url(shirukenpicture.jpg) left no-repeat;
}

The first part says that when the person first goes to the page (a, :link) no shiruken, and also if they clicked a link but there's no mouse now, no shiruken. But :hover says, when there's a mouse, show shiruken.
Now you can't use my code exactly because I'm not sure which of the three menus you listed in CSS was the one with the words, so I guessed Meio.

But the idea is, when the mouse hovers over the a (the link part) text, the shiruken would show up. I set the position for left, but your words might still sit over the picture. So, set a padding-left of maybe 5 pixels or however big the shiruken is. That will move the words a bit further to the right and give the shiruken some space.

 

ok thanks a lot