SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal rollover image navbar

    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.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    What makes things harter is that images are not in same size
    Do you mean that the rollover images is a different size or that each image in the menu is a different size?

    Are they same heights but different widths? Or are they all different in all dimensions?

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

    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>
    Make you own images and adjust the sizes and margins to suit.

    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

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, works as i wanted.
    If it's not too much asked, could you give me an example in case images are disabled.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,787
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

    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>
    The code is commented so you should be able to work it out.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jul 2001
    Location
    Estonia
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, i have nothing much to say: excellent and thank you very much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •