Am I approaching rollover buttons the right way?

Hi all,

This is the first time I'm trying to use imported graphics as buttons. I have a bunch of .png images for inactive buttons and rollover state buttons.

In my html I have each button area coded as follows:


<div id="nav"><a href="MainPage.html"><img alt="click here for homepage" src="images/navbarimages/inactbuts_03.png"></a>
<a href="productinfo.html"><img alt="click here for product info" src="images/navbarimages/inactbuts_07.png"></a>


and so forth...

Then in my CSS, I have the images for the nav div styled as such:



#nav img {
margin: 4.5%;
visibility: visible;
top: 122px;
left: 23px;
height: 53px;
border-style: none;




The graphics look great and position themselves just perfectly, but now I don't know how to make them change when I hover my mouse over them

do I need to create a #nav img:hover statement for each button? And then change the background image png for each?


I'm really having trouble wrapping my head around this.

Hello RKic,
Your CSS is be a little off, you are using top and left coordinates but you don't position the img.

The anchor you have in your markup works as a linked image but not so well as a rollover.

Have a look at a simple CSS rollover example (http://nopeople.com/CSS%20tips/CSS_rollover/index.html) here and see if that helps you. That example is a 3-state rollover but the theory is the same for just a 2-state.

I hate to admit it, but I'm still very much a beginner, and kind of need things spelled out to me sometimes. I'm not really sure what is going on at the example site.

I mean, what should the CSS be doing here? Is it telling the HTML to switch between two stored images? Or am I styling the link <a>?


I'm not grasping something fundamental here.