swap image with css

[macieira]

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:[e-mail]?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

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

regards

[edited by: jatar_k at 7:52 pm (utc) on Oct. 19, 2007]
[edit reason] no urls thanks [/edit]

[Marshall]

Hello macieira. Welcome to WebmasterWorld.

You need to add a hover to your <a> and assign the background image to it. Since the hrefs are in your #MenuBase, the easy way would be:

#MenuBase a, a:visited {
background-image: TheImageYouWantByDefault.gif;
}

#MenuBase a:hover {
background-image: TheImageYouWantToSwap.gif;
}

Since you are using text in the links, I assume you do not want them underlined. If that is the case, add

text-decoration: none;

to both examples I provided. If, however, you want to underline on the hover, add

text-decoration: underline;

to the a:hover.

This also applies to font color, family, weight, etc.

Marshall

[Xapti]

Your page has a few other problems:
One thing is that you shouldn't be using the font tag anymore because it has no usefulness anymore over setting a CSS style for the text. It's depreciated by the W3C (the organization who standardizes internet (HTTP) content), and saves you time and space by not using it.

Secondly, I notice you are using a custom font. The user must have the font installed on their machine to see it, so it's a very very bad idea to use any font that a large majority of users don't have.
You can in theory embed fonts, but trust me, it does not work well at all, so do not bother with it!

Third, you shouldn't use P tags to wrap around your link list (navigation). P means paragraph (although you could use them for even just 1 sentence), and those aren't paragraphs (or sentences).
A better idea is to wrap the whole navigation in a ul (Unordered List), and then each link should have a li (List Item) around it.

fourth, it's not a good idea to use tables for page layout anymore; tables should be used for tabular data. Particularly for an amateur/non-commercial/non-professional website it's a much better idea to use styled (usually floated) divs instead of tables.

Also, it's not a good idea to specify pixel widths for most containers which have a set height, or a very short automatic height (typically of 1 or two text lines of height), while Height should very rarely ever need to be specified at all. The exception for both cases is if only something like an image is being contained. The reason for this is that not everyone is using the same font size as you, so if their text size is set twice as large as yours, text will be cut off horizontally and/or vertically, which may either just look ugly (it could break your page layout), or even cut off content completely.
If you want to specify a width for a text container, you should use the em unit.

LASTLY, two things you didn't include in your post, but could potentially be problematic are: you may not have a doctype specified at the top of your page. Make sure you have a FULL valid doctype so that browsers know to render your site properly, instead of in quirks mode.
The other thing is that I don't see a font size specified anywhere. That in itself is good (except for an IE bug), but if you specified a font size in pixels, simply change it to ems (pixels are definately not good for text). Also, to fix a bug in IE, in your style code (CSS), include "text-size:100%" for the body, this makes IE measure ems properly when you use them for stuff like height and width.