#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0

    Making menu using rollover images


    On www.jansweijer.nl I have made a menu using rollover images with the code below. For the menu, I used this image (http://www.jansweijer.nl/wp-content/uploads/2012/10/Menugeheel.jpg). With the code, only a part of the image is shown, and the menu is centered on the page.

    There are two issues with this however:

    1) Since not every menu item has the same width, and the width is defined in #parent span (165px), of some items a too large part of the image is shown. I would like to define the width for each item individually. How do I do this?
    2) The page takes realtively long to load. This is probably because a quite large image needs to be loaded 6 times (once for each menu item?). How can I improve the loading speed of the page?

    CSS:
    Code:
    #parent {
        width:1000px;
    /*  border-bottom: 1px solid #e6e7e8;*/
        height:52px;
        padding:0 0 0 0;
        margin: 0 auto 0;
        list-style-type:none;
     }
    #parent li {
        float:left;
        margin-right:0;
     }
    
    #parent span {
        position:absolute;
        width: 165px;
        height:52px;
        top:0;
        left:0;
        background-image:url(http://www.jansweijer.nl/wp-content/uploads/2012/10/Menugeheel.jpg);
    }
    #parent a {
        position:relative;
        display:block;
        width: 165px;
        height:52px;
    }
    
    #Menu01 {
        background-position:0 0;
     }
    #Menu01:hover {
        background-position:0 -52px;
     }
    
    #Menu02 {
        background-position:-85px 0;
     }
    #Menu02:hover {
        background-position:-85px -52px;
     }
    
    #Menu03 {
        background-position:-250px 0;
     }
    #Menu03:hover {
        background-position:-250px -52px;
     }
    
    #Menu04 {
        background-position:-412px 0;
     }
    #Menu04:hover {
        background-position:-412px -52px;
     }
    
    #Menu05 {
        background-position:-548px 0;
     }
    
    #Menu05:hover {
        background-position:-548px -52px;
     }
    
    #Menu06 {
        background-position:-672px 0;
     }
    #Menu06:hover {
        background-position:-672px -52px;
     }
    HTML:
    Code:
    <ul id="parent">  
    <li><a href="http://www.jansweijer.nl/home">Home<span id="Menu01"></span></a></li>  
    <li><a href="http://www.jansweijer.nl/industrialdesign/">Industrial Design<span id="Menu02"></span></a></li>  
    <li><a href="http://www.jansweijer.nl/graphicdesign/">Graphic Design<span id="Menu03"></span></a></li>  
    <li><a href="http://www.jansweijer.nl/photography">Photography<span id="Menu04"></span></a></li>  
    <li><a href="http://www.jansweijer.nl/aboutme/">About me<span id="Menu05"></span></a></li>  
    <li><a href="http://www.jansweijer.nl/contact/">Contact<span id="Menu06"></span></a></li> 
    </ul>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, prikgek.

    I recommend placing the unique identifier on the <li> instead of on the <span>s. Also I recommend using meaningful names (e.g. "home", "industrial") instead of just a common string that suffixed with a number. Then you can use each ID in your CSS selectors to set the width for each <li> and each <span>.

    JPEG is not the best format for sprites. PNG is usually better. In general, it's best to run any PNGs you create through an optimizer.

    In this case, an optimized PNG is approximately 83% smaller than the JPEG you were using.

    Even though the image is used as the background for multiple elements, it will only be loaded once. That is the main reason for using image sprites -- fewer images need to be loaded.
    Attached Images
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    Hi Kravvitz,

    Thanks for your reply and advice..! I will use it to improve my website and coding

    Since I'm still a bit of a CSS noob, I don't completely understand what you mean by "Then you can use each ID in your CSS selectors to set the width for each <li> and each <span>.".
    I've moved the unique identifyers from <span> to <li>, but now the rollover doesn't work anymore (probably because I didn't do the part I don't understand )
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    You're welcome.

    "#Menu01" and "#Menu01:hover" are selectors. I'm saying that you would replace them with something like "#home span" and "#home a:hover span" (or if you don't care about IE6 support, you can use "#home:hover span").

    To set the widths, you could do something like this:
    Code:
    #home, #home span {
      width: 103px;
    }
    #industrial, #industrial span {
      width: 137px;
    }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    6
    Rep Power
    0
    It works!

    I am very grateful! I've been messing around with this for the past few days!

IMN logo majestic logo threadwatch logo seochat tools logo