Now Reading: Rollover Images with CSS instead of Javascript | Jump To Comments
Mothman queried this. I don't think I have access to the community leaders blog yet so if anyone who has access would be so kind as to post this on there too I'd appreciate it...
It seems that this blogging script removes 'script' tags from the template - at least, Mothman wasn't able to use javascript to make his rollover images for links.
Solution using CSS (yay CSS!):
Create your link with the image (in this example, let's say the image is 200px wide and 50px high, which comprises of your first 100px wide image on the left and 100px rollover image on the right, forming one 200px long image:
< a href="#" >< img src="blah.jpg" >< /a >
And add the following CSS to the template code:
a { display:block; height:50px; width:100px; overflow:hidden; }
a:hover { display:block; text-indent:-100px; }
It works by setting the first tag with the height of the image and a width of half the image, so you only see the one half (the pre-rollover image); then, the a: hover bit has a text indent of -100px, half the width of the full image, which shifts the image to the left and only shows the right-hand-side rollover image.
This apparently works with all of the most common browsers. :)
- Pixie
It seems that this blogging script removes 'script' tags from the template - at least, Mothman wasn't able to use javascript to make his rollover images for links.
Solution using CSS (yay CSS!):
Create your link with the image (in this example, let's say the image is 200px wide and 50px high, which comprises of your first 100px wide image on the left and 100px rollover image on the right, forming one 200px long image:
< a href="#" >< img src="blah.jpg" >< /a >
And add the following CSS to the template code:
a { display:block; height:50px; width:100px; overflow:hidden; }
a:hover { display:block; text-indent:-100px; }
It works by setting the first tag with the height of the image and a width of half the image, so you only see the one half (the pre-rollover image); then, the a: hover bit has a text indent of -100px, half the width of the full image, which shifts the image to the left and only shows the right-hand-side rollover image.
This apparently works with all of the most common browsers. :)
- Pixie