CSS Rollover Images - No Preload Required
CSS Rollover Background Images - No Preload Required
[Part Two]
(Read [Part One])
Creating the Images for the Examples
Here are the two images I used for the two examples on the right. The upper "menu" on the right of these pages uses the vertical graphic (shown left). The image is 10px wide and 105px high.
The lower "menu" uses the horizontal graphic (shown top right of this text). This image is 348px wide and 12px high. The white space in the images (transparency) is important for reasons which will be demonstrated later.
Example One Uses the Vertical Position to Move
The code for this menu uses the general code found on Page 1 of this example. The rest of the code is as follows:
#linksV a {
color: orange;
background: #ddd url(3-in-1-bulletV.gif) no-repeat;
background-position: 3px 5px;
}
#linksV a:visited {
color: red;
background-position: 3px -85px;
}
#linksV a:hover{
color: yellow;
background-position: 3px -40px;
}
Demo menu
I decided on 3px for the left position, as there is no "padding" built into the graphic. The left position remains a constant throughout the effect.
The top positions should then be calculated according to how much "white space" you have put into the image. By giving the top position a negative measurement you are moving the background image upwards.
- The downsides to this example:
- You cannot effectively center the bullet if the link text spills over onto 2 lines. The bullet will remain at the top line.
- and a major downside:- If you resize your browser text you will see that the top menu messes up the desired effect. This is because you cannot effectively predict how much white space will be neccessary height-wise, it's an unknown variable. (Note: You could use a very tall graphic, but I recommend the Horizontal Graphic Version)
Example Two Uses the Horizontal Position to Move
The code for this menu uses the general code found on Page 1 of this example. The rest of the code is as follows:
#linksH a {
color: orange;
background: #ddd url(3-in-1-bulletH.gif) no-repeat;
background-position: 3px 50%;
}
#linksH a:visited {
color: red;
background-position: -332px 50%;
}
#linksH a:hover{
color: yellow;
background-position: -172px 50%;
}
The calculations are based on the same theory as the previous example but this time it's the left position that gets the negative value to move it off the side instead of the top.
- I recommend this version for 2 reasons.
- The first being that you can use percentages for the vertical position and thus effectively centre your "bullet" vertically (i.e. it will remain centered at any resolution and regardless of how many lines of text are in the link - go on do a text resize and see!)
- By giving the menu a fixed width you can effectively make sure that the whitespace in the graphic is always more than the width of the menu so no two "bullets" should appear in the background at the same time.
Well that's it. Thank you for reading if you got this far. And I know I could have probably covered the mathematics better but I hope this is still helpful!
- Updates:
- June 2004 - Ryan Carver has written up a great study of this "flicker" and details how to build in CSS "double buffering" workaround if tweaking server settings doesn't work for you.
- November 2003 - it turns out that the IE6 flicker is due to a server bug outwith the control of CSS. It will not show up for everyone only when you are using IE6/Windows with a cache setting of "Every visit to page". To change this option, Tools» Internet Options.. General Tab: Temporary Internet Files » Settings.
- August 2003 - In testing this was working on all available browsers but now it's on the server, it seems not be "instant" with IE6? - feedback welcome on this and any other browser observations.
«« tanfa :: CSS Index | tanfa :: CSS Examples Index »»
Credits: The inspiration for this example came from Petr Stanicek [aka -pixy-].