This effect is much cooler if you use small gifs. I used large images in the Animate link on mouse over example just to make it easier for you to see what I am doing.
When the mouse hovers over the link, you see the animation. When the mouse is not over the link you see a still image. The best examples of this I have seen use small still image as a background, and a copy of that that has sparkles that appear and disappear when the mouse hovers.
You need two gifs; one a still image, and one animated version of that still image:
You can just drag these two images I used to your desktop to play with.
Here is the HTML/CSS for this example:
<html>
<head>
<title>Animated link mouse over example</title>
<style type=”text/css”>
#link {
position: absolute;
top: 100px;
left: 100px;
}
a {
background: url(animate-link-still.gif) no-repeat center;
height: 256px;
width: 256px;
padding: 125px;
}
a:hover{
background: url(animate-link-rotate.gif) no-repeat center;
}
</style>
</head>
<body>
<div id=”link”>
* Note: make the height and width of the link the same as your image size.
2 responses so far ↓
1 kstyle // Jun 30, 2007 at 12:22 am
Using your great blog I was able to add code for stumble upon link and delicious link. The digg it link was a problem as I don’t want an icon. Just the word Digg It as the link like you have on your blog. Could you possible send me the code for this or point me in the right direction. To see what I have you can go to my blog http://www.kstyle-style.blogspot.com
Sincerely and with regard
karen
k
2 herself // Jun 30, 2007 at 12:42 am
Digg Link with icon:
<a href=”http://digg.com/submit?phase=2
&url=<?php the_permalink() ?>
&title=<?php the_title(); ?>
&bodytext=>?php the_excerpt() ?>”
title=”Digg this story”>
<img src=”http://digg.com/img/badges/
10×10-digg-thumb.png”
mce_src=”http://digg.com/img/badges/
10×10-digg-thumb.png”
width=”10″ height=”10″ alt=”Digg!” /< Digg this</a>
To leave out the image just delete the:
<img src=”http://digg.com/img/badges/
10×10-digg-thumb.png”
mce_src=”http://digg.com/img/badges/
10×10-digg-thumb.png”
width=”10″ height=”10″ alt=”Digg!” />
from the code. So you just have:
<a href=”http://digg.com/submit?phase=2
&url=<?php the_permalink() ?>
&title=<?php the_title(); ?>
&bodytext=>?php the_excerpt() ?>”
title=”Digg this story”></a>
You must log in to post a comment.