What's the simplest method for mouseover on this navbar?

[iphonepiephone]

Hi people. Trying to split this navbar into slices, one per link, so that onmouseover causes the shade to lighten, giving visual feedback to the visitor. Am I best to use an unordered list, in block mode, such as:

<ul id="navbar">
<li id="someLink"><a href="#"><img src="sliceID.png" /></a></li>
</ul>

Thx

 

[JCL]

Thats how I would do it.

CSS sprites using a ul.

 

[IgnatiusTheKing]

Thats how I would do it.

CSS sprites using a ul.

Yep, this. If, however, you wanted to use text instead of images for you links, check out web fonts like Typekit or, even easier, Google, which has a few "handwriting" fonts that look similar to yours.

 

[maxrosecollins]

I would use a ul with my links in then use CSS to indent the text by -9999px then set the correct slice of the image text to each link. and use :hover for the hover states on each link.

Or use @fontface, forget images, and do it all in code. <- prob best.

Max

 

[Hexiii]

Maybe this, but it makes the code a little chaotic. I use CSS :hover mostly.

<img src="sliceID.png" onmouseover="this.src='slicemouseover'" onmouseout="this.src='sliceID.png'"/>

 

[digitalField]

yea stick to CSS and avoid images if you can, it might seem a bit confusing at first, but in the long run it is much more flexible.

here are some great examples of navigation styles in pure CSS http://css.maxdesign.com.au/listamatic/

here are some more advanced lists/navigation using CSS3 techniques.

http://speckyboy.com/2010/03/15/15-css3-navigation-and-menu-tutorials-and-techniques/

and if after all those you still think you need to use images then use sprites and CSS to activate the hover

M!