Creating Rollover Images in ASP.Net

Question

I have a menu bar of images. What is the best way to create rollover images for the menu bar?

I am using Visual Studio 2008 in VB.Net

Answer 1

If it's a background image, you can use the css :hover selector to change the background image.

Answer 2

You could use a combination of the Menu control, CSS Friendly Adapters, and CSS Sprites.

I've done a lot of these, so feel free to ask any questions.

In the end, you want something like this:

<ul id="nav">
  <li><a href="page1.aspx" id="page1">Page 1</a></li>
  <li><a href="page2.aspx" id="page2">Page 2</a></li>
  <li><a href="page3.aspx" id="page3">Page 3</a></li>
  <li><a href="page4.aspx" id="page4">Page 4</a></li>
</ul>

Style it something like so:

#nav li { float: left; }
#nav a { height: 30px; width: 150px; background: transparent url("bg.png") no-repeat scroll left top; }
#nav a#page1:hover { background-image-position: -30px 0; }

etc. etc...

You'll have to set the background image position of each element, but that tutorial on image sprites should get you there.

The Css Menu Adapter in Asp.Net, unfortunately doesn't put IDs on each element. I edited the source code to do this, but you may want to just do it with html, if you don't need the abstraction the Menu control gives you.

Answer 3

You can do a css solution too. It involves more work on creating the image rollovers, ie on the graphic design side.

See the css in: http://clearleft.com/