|
See how it cycled through just once and then stop? Normally for an animation like this you would use an animated gif. However, if you want it to cycle just once every time you mouse over it, you have a problem. Once an animated gif is loaded and if it isn't a continuously looping animated gif, it will not run again until the page is reloaded. The best way to get this effect is to use javascript to animate the logo.
First, of course, you need the files for the animation like this:
                       
This one consists of 24 files. I find it makes it a lot easier if you number the file names like this: 1.gif, 2.gif, 3.gif, 4.gif, etc.
Here is the code for the animation:
You see, it's not really all that complicated. Let me explain the code for you. First we have:
<![CDATA[var timer
var counter = 1]]>
This just sets the variable for the timer and sets the counter variable at 1.
<![CDATA[ timer = setTimeout("animate()",100);]]>
This is the timer. With setTimeout you are telling the browser to wait a certain amount of time before executing the function. Here you are telling it to run the "animate()" function after 100/1000 of a second.
<![CDATA[ counter++;]]>
Here you are incrementing the counter by one.
<![CDATA[ if (counter < 24) {
document.mcom.src = imgs[counter].src
}]]>
If the counter is less than 24, then the source of the image named 'mcom' is file assigned to the source of the image object named "imgs[whatever the number is]".
<![CDATA[ else {
clearTimeout(timer);
counter = 1;
document.mcom.src = imgs[counter].src
}]]>
If the counter is more than 24, then you stop the timer, set the counter to 1 and assign the source of "imgs[1]" to the image named "mcom".
That's all it takes for the animation.
Now you need to create the image objects that you use in the function. After the body tag use this function to create the image objects:
<![CDATA[if (document.images){
var imgs = new Array()
for (var i = 1; i < 25; i++) {
imgs[i] = new Image(72, 35)
imgs[i].src = i + ".gif"
}
}]]>
This just runs a loop that is creating a series of image objects like this:
<![CDATA[imgs[1] = new Image(72, 35);
imgs[1].src = "1.gif";
imgs[2] = new Image(72, 35);
imgs[2].src = "2.gif";]]>
and so on until it reaches the number 24 and then it stops.
Now all that's left to do is put the mouseover code in your link for the button:
<![CDATA[<A HREF="#" onMouseover="animate();return true;">
<IMG SRC="1.gif" WIDTH=72 HEIGHT=35 BORDER=0 name="mcom"></A>]]>
That's all there is to it. Make sure you name your image file so the function can find it. If you are doing more than one animation on the page, you can pass that name as a variable and use the same function for all of them like this:
<![CDATA[<A HREF="#" onMouseover="animate('mcom');return true;">
<IMG SRC="1.gif" WIDTH=72 HEIGHT=35 BORDER=0 name="mcom"></A>]]>
and adjust your function like this to pass the image name as a variable:
<![CDATA[var timer
var counter=1
function animate(imgname) {
timer = setTimeout("animate(\'" + imgname + "\')",100)
counter++;
if (counter < 24) {
document[imgname].src = eval("imgs[" + counter + "].src");
}
else {
clearTimeout(timer);
counter = 1;
document[imgname].src = imgs[counter].src
}
}]]>
Images for animation courtesy of the kind folks at www.missoula.com.
|
