I
Ivan Marsh
Hello,
I fat fingered my newsreader while I was trying to post this before and I
don't know if it's already been posted or not. I apologise if it gets
posted more than once.
That said...
I've been meaning to write an image swapper like this for a while and
finally got around to it. I'm wondering what people think of it, comments,
suggestions, that sort of thing.
Also, the preloadimages function isn't necessary for the image swapping
functions but am I correct in assuming that the images being preloaded
will speed up the image swapping the first time the page is loaded? I
don't know if the way I'm preloading them will make them load from cache
during the image swap or not.
Let me know if you have any ideas.
<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>
I fat fingered my newsreader while I was trying to post this before and I
don't know if it's already been posted or not. I apologise if it gets
posted more than once.
That said...
I've been meaning to write an image swapper like this for a while and
finally got around to it. I'm wondering what people think of it, comments,
suggestions, that sort of thing.
Also, the preloadimages function isn't necessary for the image swapping
functions but am I correct in assuming that the images being preloaded
will speed up the image swapping the first time the page is loaded? I
don't know if the way I'm preloading them will make them load from cache
during the image swap or not.
Let me know if you have any ideas.
<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>