Posted 11 years ago
·
Author
On my IMVU homepage, I wanted to advertise icons I have for sale. Now displaying every icon in a single image would make the image large and therefore it would not fit into the custom layout I was designing. To the solve this problem, my first thought was to simply use an animated gif. Normally this would suit my needs just fine. However I find the gif file format to be severely lacking in quality. No matter what program I used to make the gif or what quality settings I chose, the gif always came out looking horrible. Now this just wasn't gonna do. How can I advertise how good my icons look when the image I am using looks like shit?
So, the following code is my solution to this problem. It's more complicated and adds a lot more code to your profile, but in the end, the quality is worth it.
Simply put, this code uses a variable, a timer and switch statement to effectively make an animation loop. Every time you call the function, the variable value changes, therefore, the next time the function is called, it loads a different block of code which shows a different image. I also added code to stop and start the function so the viewer can hover their mouse over my icons to stop the animation and look at the icons being advertised in that "frame". It's pretty simple once you learn it and it's easy to expand on.
I got the idea from http://www.devx.com and modified to suit my needs. For the most part the code is the same. I added another case to the switch, added the stop/start functions and added events to the image for the stop/start functions.
Note: I've noticed some hiccups with the timer when you switch tabs so that's something to keep in mind.
So, the following code is my solution to this problem. It's more complicated and adds a lot more code to your profile, but in the end, the quality is worth it.
Simply put, this code uses a variable, a timer and switch statement to effectively make an animation loop. Every time you call the function, the variable value changes, therefore, the next time the function is called, it loads a different block of code which shows a different image. I also added code to stop and start the function so the viewer can hover their mouse over my icons to stop the animation and look at the icons being advertised in that "frame". It's pretty simple once you learn it and it's easy to expand on.
I got the idea from http://www.devx.com and modified to suit my needs. For the most part the code is the same. I added another case to the switch, added the stop/start functions and added events to the image for the stop/start functions.
Note: I've noticed some hiccups with the timer when you switch tabs so that's something to keep in mind.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
//Declare the variable to start with.
var intImage = 3;
//The setInterval method does not have the ability to be paused.
//Therefore this function is needed to start it again.
function startSwap() {
//There are 1000 milliseconds in one second.
var interval = setInterval(function (){swapImage()},1000);
}
//This is the core animation code. This function will show a different image each time it is called.
//It does this because each time it's called, it changes the intImage variable.
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = "Icons1.png"
intImage = 3
return(false);
case 2:
IMG1.src = "Icons3.png"
intImage = 1
return(false);
case 3:
IMG1.src = "Icons2.png"
intImage = 2
return(false);
}
}
//This will stop the setInterval method.
function stopSwap() {
clearInterval(interval);
}
</SCRIPT>
</HEAD>
<BODY onload="startSwap()">
<!--The onmouseover and onmouseout events allow you to stop and start the animation.-->
<!--This way the viewer can stop and look at whichever frame of the animation they want.-->
<IMG id="IMG1" name="IMG1" src="Icons1.png" onmouseover="stopSwap()" onmouseout="startSwap()">
</BODY>
</HTML>