I
Ivan Marsh
I've been meaning to write an image swapper like this for a while and I
finally got it to work the way I want it to. I was wonder what you folks
think of it.
Also, the preloadimages() function isn't necessary for the image swapping
functions to work but I'm wondering if it's doing anything
at all to speed up image swap when the page is loaded for the first time.
Am I right in assuming that once these images are cached that the
functions will be pulling them from cache?
<SCRIPT LANGUAGE='JavaScript'>
var myimages = new Array();
function preloadimages() {
var imagelist = new Array(
"/test/imageswap/images/test-out.gif",
"/test/imageswap/images/test-over.gif",
"/test/imageswap/images/test-click.gif",
"/test/imageswap/images/test2-out.gif",
"/test/imageswap/images/test2-over.gif",
"/test/imageswap/images/test2-click.gif"
);
for (i=0; i < imagelist.length; i++) {
myimages = new Image();
myimages.src = imagelist;
}
}
preloadimages();
function imgonmouseover(currentimage) {
currentimage.src = currentimage.src.substring(0, currentimage.src.lastIndexOf('-') + 1) + 'over' + currentimage.src.substring(currentimage.src.lastIndexOf('.'));
}
function imgonmouseout(currentimage) {
currentimage.src = currentimage.src.substring(0, currentimage.src.lastIndexOf('-') + 1) + 'out' + currentimage.src.substring(currentimage.src.lastIndexOf('.'));
}
function imgonclick(currentimage) {
currentimage.src = currentimage.src.substring(0, currentimage.src.lastIndexOf('-') + 1) + 'click' + currentimage.src.substring(currentimage.src.lastIndexOf('.'));
}
</SCRIPT>
<HTML>
<BODY BGCOLOR='BLACK'>
<FONT COLOR='WHITE'>
<CENTER>
<IMG BORDER='0' NAME='test' SRC='/test/imageswap/images/test-out.gif' ONMOUSEOVER='imgonmouseover(this)' ONMOUSEOUT='imgonmouseout(this)' ONCLICK='imgonclick(this)'>
<P>
<IMG BORDER='0' NAME='test2' SRC='/test/imageswap/images/test2-out.gif' ONMOUSEOVER='imgonmouseover(this)' ONMOUSEOUT='imgonmouseout(this)' ONCLICK='imgonclick(this)'>
</CENTER>
</BODY>
</HTML>
finally got it to work the way I want it to. I was wonder what you folks
think of it.
Also, the preloadimages() function isn't necessary for the image swapping
functions to work but I'm wondering if it's doing anything
at all to speed up image swap when the page is loaded for the first time.
Am I right in assuming that once these images are cached that the
functions will be pulling them from cache?
<SCRIPT LANGUAGE='JavaScript'>
var myimages = new Array();
function preloadimages() {
var imagelist = new Array(
"/test/imageswap/images/test-out.gif",
"/test/imageswap/images/test-over.gif",
"/test/imageswap/images/test-click.gif",
"/test/imageswap/images/test2-out.gif",
"/test/imageswap/images/test2-over.gif",
"/test/imageswap/images/test2-click.gif"
);
for (i=0; i < imagelist.length; i++) {
myimages = new Image();
myimages.src = imagelist;
}
}
preloadimages();
function imgonmouseover(currentimage) {
currentimage.src = currentimage.src.substring(0, currentimage.src.lastIndexOf('-') + 1) + 'over' + currentimage.src.substring(currentimage.src.lastIndexOf('.'));
}
function imgonmouseout(currentimage) {
currentimage.src = currentimage.src.substring(0, currentimage.src.lastIndexOf('-') + 1) + 'out' + currentimage.src.substring(currentimage.src.lastIndexOf('.'));
}
function imgonclick(currentimage) {
currentimage.src = currentimage.src.substring(0, currentimage.src.lastIndexOf('-') + 1) + 'click' + currentimage.src.substring(currentimage.src.lastIndexOf('.'));
}
</SCRIPT>
<HTML>
<BODY BGCOLOR='BLACK'>
<FONT COLOR='WHITE'>
<CENTER>
<IMG BORDER='0' NAME='test' SRC='/test/imageswap/images/test-out.gif' ONMOUSEOVER='imgonmouseover(this)' ONMOUSEOUT='imgonmouseout(this)' ONCLICK='imgonclick(this)'>
<P>
<IMG BORDER='0' NAME='test2' SRC='/test/imageswap/images/test2-out.gif' ONMOUSEOVER='imgonmouseover(this)' ONMOUSEOUT='imgonmouseout(this)' ONCLICK='imgonclick(this)'>
</CENTER>
</BODY>
</HTML>