Roll-over Image Links With Css No preloading of images

theRealSheep · April 13, 2005

Here is a way of having roll over image links without preloading images by using CSS and a table. It's very useful for a list of links as in a side bar menu or header. It also solves not having to make a seperate image for each different link by placing the desired text over the image.

1. First you need an image which comprises of the main link image, the 'mouse over' image link underneath plus you can have another for visited links. As for most roll over images, the images should be the same size.

Posted Image

The above example - button.gif is 100x60px with each link image being 100x20px

2. Now you need the CSS styling. This can either be incorporated in your existing style sheet or placed in the <head> tag as shown below.

<head>  <style>  <!--  .button A  {  display : block;  background : url("images/button.gif") 0px 0px no-repeat;   /* '0px 0px' tells browser to start at top-left of the image */  width : 100px;  height : 20px;   /* width & height of individual link image */  font : bold 11px/18px Verdana, sans-serif;   /* '11px/18px' is the font-size and line-height  */   /* Adjust line-height to center the text in the block height (height : 20px) */  text-align : center;    /* can replace with 'text-indent : <length>' for different effect */   color : black;  text-decoration : none;  }     .button A:Visited  {  background : url("images/button.gif") 0px -40px no-repeat;   /* '-40px' tells browser the visited part is 40px down from top */  color : white;  }      .button A:Hover  {  background : url("images/button.gif") 0px -20px no-repeat;   /* '-20px' tells browser the roll over part is 20px down from top */  color : white;  }  -->  </style></head>

3. Then the HTML for the links. Simply <a href=""> links in a table with the class="button" attribute.

<table class="button" border="0" cellspacing="0" cellpadding="2">
<tr><td><a href="home.html">Home Page</a></td></tr>
<tr><td><a href="link_1.html">Page 1</a></td></tr>
<tr><td><a href="link_2.html">Page 2</a></td></tr>
<tr><td><a href="link_3.html">Page 3</a></td></tr>
</table>

The above code will produce somthing like this...

Posted Image

The important part is the class="button" attribute in the <table> tag. Using a table helps with browsers that don't fully support CSS to still show a table with the text links.

Notes:

Important to remember all <a href=""> links in any of the class="button" table cells will have the same image roll over formatting. eg. Always create a seperate table for the list of links.

If you do not want the visited link, you only need the two parts in the button.gif image and delete the A:Visited element from the CSS.

Instead of centering the text using 'text-align', you can use the 'text-indent' attribute to place the text a certain distance from the left-hand edge (see example below - used 'text-indent : 30px;').

For a use as a naviagation header, just place the links across the table in the one row (see example below).

Posted Image

I have used very basic image examples, but it is possible to crate some very impressive roll over image links using this technique.

I have tried to explain it in depth if you wish to make your own, but feel free to comment here or even message me.

Carsten · April 19, 2005

This method is indeed very useful and much better then a javascript image replacement.I also used this method on several projects, though I never use tables for menu's but lists. It takes a minute to get used to lists but I recommend it to everyone. You can find many useful resources on lists also, and they are very easy to use in combination with different border behaviour.

mizako · April 19, 2005

This method is indeed very useful and much better then a javascript image replacement.

131431[/snapback]

Really interesting method but why is more useful and much better than Javascript image replacement.

I also used this method on several projects, though I never use tables for menu's but lists. It takes a minute to get used to lists but I recommend it to everyone. You can find many useful resources on lists also, and they are very easy to use in combination with different border behaviour.

131431[/snapback]

I use list for my menus also. I think it is correct to use them because a menu is an enumeration not a table and nowadays the desired effects can be achieved by means of CSS.

Sign In

Roll-over Image Links With Css No preloading of images

Recommended Posts

theRealSheep 0

Share this post

Link to post

Share on other sites

Carsten 0

Share this post

Link to post

Share on other sites

mizako 0

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information