How to animate a link on mouse over

Posted by ljmacphee on June 29, 2007 under HTML, css, graphics, how to |

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>
&ltbody>

<div id=”link”>

* Note: make the height and width of the link the same as your image size.

  • kstyle said,

    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

  • herself said,

    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>

Add A Comment

You must be logged in to post a comment.

home top