 Roll-over Image Links With Css, No preloading of images |
|
|
|
|
  |
 Apr 13 2005, 03:11 AM
Post
#1
|
|
|
Member [Level 1]  Group: Members Posts: 69 Joined: 12-March 05 From: Australia Member No.: 4,401  |
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.  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. CODE <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. HTML <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...  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).  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. |
 |
 
|
|
Apr 19 2005, 12:07 PM
Post
#2
|
|
|
Member [Level 1] Group: Members Posts: 51 Joined: 22-March 05 Member No.: 4,813 |
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. |
|
|
|
|
Apr 19 2005, 02:46 PM
Post
#3
|
|
|
Super Member Group: Members Posts: 372 Joined: 16-August 04 From: Spain Member No.: 824 |
QUOTE(Carsten @ Apr 19 2005, 12:07 PM) This method is indeed very useful and much better then a javascript image replacement.  Really interesting method but why is more useful and much better than Javascript image replacement. QUOTE(Carsten @ Apr 19 2005, 12:07 PM) 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. 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. |
|
|
|
|
Similar Topics
|
Lo-Fi Version | Time is now: 10th October 2008 - 08:06 PM |