I've written a simple script that allows for easy implementation of a roll
over. I know, I know, roll-overs are not *THAT* complicated to do but with a
large site it may help to use one simple script for all of that. The
interesting part is that you use the same function call for both OnMouseOver
and OnMouseOut
function GetImageContainingFolder(ImageSource)
{
var splitImgSrc = ImageSource.split("/");
//remove image name from array; last element
splitImgSrc[splitImgSrc.length-1] = "";
return splitImgSrc.join("/");
}
function GetImageName(ImageSource)
{
var imgSrcSplit = ImageSource.split("/");
var imgName = imgSrcSplit[imgSrcSplit.length-1];
return imgName.substr(0, imgName.length - 8);//remove 4 chars for _IMG or
_OVR and 4 for .gif/.jpg/.png
}
function SwapImages(ImageName)
{
var img = document.images[ImageName];
var imgSrc = img.src;
var newSrc = GetImageContainingDir(imgSrc) + GetImageName(imgSrc);
img.src = (imgSrc.indexOf("_ov") > 0) ? newSrc + "_img.gif": newSrc +
"_ovr.gif";
}
Just call the SwapImages function and pass the name of the image you want to
roll over. The only thing though is that all images should be named as
follows:
ImageName_IMG.ext -> Normal state
ImageName_OVR.ext -> Mouse Over State
Hope that helps
Paul
-----Original Message-----
From: Mark Groen [mailto:[EMAIL PROTECTED]
Sent: Wednesday, March 19, 2003 6:41 AM
To: [EMAIL PROTECTED]
Subject: [wdvltalk] Re: Image swapping on loaded page
On March 19, 2003 at 6:52, Dave Sebaste wrote:
> There isn't a way to change an image on a page being displayed in a
> browser without reloading the whole page, is there? Talking about
> using HTML, DHTML, scripting, etc.
You could use something like this to create a banner that rolls over four
pics.
<script>
var banners = new
Array("banner1.jpg","banner2.jpg","banner3.jpg","banner4.jpg")
var bnrCntr = 0
function bancycle() {
bnrCntr = bnrCntr + 1
if (bnrCntr == 4) {
bnrCntr = 0
}
document.Banner.src = banners[bnrCntr]
setTimeout("bancycle()",3000)
}
</script>
<BODY onload="setTimeout('bancycle()',3000)">
<IMG SRC="banner1.jpg" Name="Banner" width="320" height="65">
Regards,
Mark Groen
MG Web Services
Web Site Hosting and Development
www.markgroen.com
[EMAIL PROTECTED]
604-780-6917
____ • The WDVL Discussion List from WDVL.COM • ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to %%email.unsub%%
____ • The WDVL Discussion List from WDVL.COM • ____
To Join wdvltalk, Send An Email To: mailto:[EMAIL PROTECTED]
Send Your Posts To: [EMAIL PROTECTED]
To change subscription settings to the wdvltalk digest version:
http://wdvl.internet.com/WDVL/Forum/#sub
________________ http://www.wdvl.com _______________________
You are currently subscribed to wdvltalk as: [EMAIL PROTECTED]
To unsubscribe send a blank email to [EMAIL PROTECTED]
