yimaw
yup, absolutely no javascript used whatsoever.
All we do is make use of the magical "display:block;" and add a background image to our anchor.
So here you can see that each link state is given a fixed height and width (can be %) and also a background image, so to create the rollover we give the "hover" a different background.
It's best to set the width and height so there will be no repeating/distortion.
Here's how you would call it in to a div for example:
Alot nicer and more efficient than javascript.
The biggest benefit in my mind is in terms of search engines, see they can't read text that's in images so by putting our rollover image in the background we can still put normal text in the link. Search engines being able to read you link text is very important for getting a good placement.
This rollover can also be place in a list ,table cell or floated freely
this attachment has a demonstration of both a button with readable text and without.[/code]
All we do is make use of the magical "display:block;" and add a background image to our anchor.
| Code: |
| <style type="text/css">
a.rollover:link {color: #486278;text-decoration:none;width:266px;height:65px;background :url(images/logo1.jpg); display:block;} a.rollover:visited {color: #000000; text-decoration:none;width:266px;height:65px;background :url(images/logo1.jpg);display:block;} a.rollover:hover {color: #000000; text-decoration:none;width:266px;height:65px;background :url(images/logo1over.jpg);display:block;} a.rollover:active {color: #ECFB03; text-decoration:none;width:266px;height:65px;background :url(images/logo1.jpg);display:block;} </style> |
So here you can see that each link state is given a fixed height and width (can be %) and also a background image, so to create the rollover we give the "hover" a different background.
It's best to set the width and height so there will be no repeating/distortion.
Here's how you would call it in to a div for example:
| Code: |
| <div style="height:65px;width:266px;"><a class="rollover" href="foo.html"> </a></div> |
Alot nicer and more efficient than javascript.
The biggest benefit in my mind is in terms of search engines, see they can't read text that's in images so by putting our rollover image in the background we can still put normal text in the link. Search engines being able to read you link text is very important for getting a good placement.
This rollover can also be place in a list ,table cell or floated freely
this attachment has a demonstration of both a button with readable text and without.[/code]
