| SitePoint Sponsor |
I'm trying to make horizontal rollover image navbar, using CSS and no JavaScript, but I can't find any good example. I know how to do vertical navigation, but horizontal is not that easy. What makes things harter is that images are not in same size. I have found lot of examples, but all are for text navigations. Hopefully someone can help me.
Do you mean that the rollover images is a different size or that each image in the menu is a different size?What makes things harter is that images are not in same size
Are they same heights but different widths? Or are they all different in all dimensions?
Paul
Active and unactive image for "Contact" are same size, but active and unactive "Sitemap" is not same size as "Contact". Hopefully you can understand what i mean.
Sorry for my bad english.
Hi,
Well there are many ways to go about this and all depend on the situation.
Here is an example of putting the images into the background of the list and the background of the anchor.
On hover the anchor background is made transparent thus revealing the image underneath. This means the images are pre-loaded and will display quicker than swapping images on hover.
You have to hard code the size of the images and their positions in the css.
Make you own images and adjust the sizes and margins to suit.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul, li { margin:0; padding:0; list-style-type:none; } li { float:left } li#img1 {background: url(images/pmoblogog.jpg) no-repeat left top;width:155px;height:102px}/* over state of image*/ li#img1 a {display:block;width:155px;height:102px;background: url(images/pmoblogof.jpg) no-repeat left top;}/*normal state of image*/ li#img2 {margin-top:67px;background: url(images/pobnavup.jpg) no-repeat top left;width:200px;height:35px}/* over state of image*/ li#img2 a {display:block;width:200px;height:35px;background: url(images/pobnavdown.jpg) no-repeat top left;}/*normal state of image*/ li#img1 a:hover,li#img2 a:hover{background:transparent} </style> </head> <body> <ul> <li id="img1"><a href="#"></a></li> <li id="img2"><a href="#"></a></li> </ul> </body> </html>
The above is just one way and may not be suitable depending on the situation. You probably should also look at replacement techniques in case images are disabled or missing because the user will be unable to navigate the site.
This involves placing text in a span then shoving it out the way with text-indent:-999px etc.
Paul
Excellent, works as i wanted.
If it's not too much asked, could you give me an example in case images are disabled.
Hi,
Well this example means that the normal state of the images must be in the html. This has the added benefit that you can add alt and title tags as well anyway.
The idea is just to put some text in a span that sits underneath the anchor. Although the text isn't a link it will act as a link because the anchor is on top of the text but the anchor is just not visible.
The only drawback is to make sure that the text takes up less room than the image otherwise it will peek out the sides.
The code is commented so you should be able to work it out.Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul, li { margin:0; padding:0; list-style-type:none; } li {float:left} li#img1 a {display:block;width:155px;height:102px;background: url(images/pmoblogof.jpg) no-repeat left top;}/*over state of image*/ li#img2 a {display:block;width:200px;height:35px;background: url(images/pobnavdown.jpg) no-repeat top left;}/*over state of image*/ li#img2 {margin-top:67px;}/* line second image up with first*/ ul#nav li a:hover {visibility:visible}/* ie needs this */ ul#nav li a:hover img {visibility:hidden}/* hide image on hover to let background show through */ ul#nav li a, ul#nav li, ul#nav li a img {position:relative;z-index:2;}/* set z-indexes */ ul#nav li span {position:absolute;left:0;bottom:0;z-index:1;text-decoration:underline;}/* make span text appear as though its a link */ #nav li img {border:none}/* turn borders off on images */ </style> </head> <body> <ul id="nav"> <li id="img1"><span>text1</span><a href="#"><img src="images/pmoblogog.jpg" alt="link1" width="155" height="102" /></a></li> <li id="img2"><span>text2</span><a href="#"><img src="images/pobnavup.jpg" alt="link2" width="200" height="35" /></a></li> </ul> </body> </html>
Paul
Again, i have nothing much to say: excellent and thank you very much.
Posting Permissions
Bookmarks