PDA

Click to See Complete Forum and Search --> : Image Flip

charish2k1
05-03-2003, 01:29 PM
Alright, I know how to use the coding, but i Have one problem for the image flip: how to do multiple image flips on one page. The image flip code I'm using is:

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(75,50)
Image1.src = "goof3.gif"
Image2 = new Image(75,50)
Image2.src = "goof4.gif"

function SwapOut() {
document.imageflip.src = Image2.src; return true;
}

function SwapBack() {
document.imageflip.src = Image1.src; return true;
}

// - stop hiding -->
</SCRIPT>

Email me at my email address with the subject "Image Rollover". It'll be a while before I reply with my thanks due to some technical difficulties on my computer. Thank you.
fakeName
05-03-2003, 02:11 PM
Try this. You create an array of images using a set naming scheme. someimage-out.gif and someimage-over.gif.
The array is the root of the name, i.e. someimage, and then we loop through and set the source by appending "-on.gif" and "-off.gif". The loop can preload any images that you put in the imgArray(). The rollOut() and rollOver() functions reset the source to perform the swap.

It is important that the image name attribute is the same name as as the image name without the -out of -over. So:
<img src="image1-out.gif" name="image1">
<img src="image2-out.gif" name="image2">
etc, etc.

<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

// make an array that is used to do two things:
// 1) Access the name attribute of the image tag
// 2) preload the images and set the source to the names image1-out.gif, image1-over.gif, image2-out.gif, image2-over.gif, etc, etc.
// See, you can have as many images as you like

var imgArray = new Array('image1', 'image2', 'image3');

// create an array used to create image objects. Then we'll loop and set the source of each object. You'll see.

var imgOut = new Array();
var imgOver = new Array();
var pth = "images/"; // or whatever path to the directory
// where your images are stored.

// preload images
if (document.images)
{
// Loop through the imgArray and set
// create a new image object and set its source.

for(i=0; i<imgArray.length; i++)

{
// set out image source
imgOut[i] = new Image();
imgOut[i].src = pth + imgArray[i] + "-out.gif";
// set over image source
imgOver[i] = new Image();
imgOver[i].src = pth + imgArray[i] + "-over.gif";
}
}


function rollOver(i)
{
document.images[imgArray[i]].src = imgOver[i].src;
}

function rollOut(i)
{
document.images[imgArray[i]].src = imgOut[i].src;
}

//-->
</script>

</head>

<body>
<a href="somewhere1.html" onMouseOver="rollOver(0)" onMouseOut="rollOut(0)">
<img src="images/image1-out.gif" name="image1">
</a>

<a href="somewhere1.html" onMouseOver="rollOver(1)" onMouseOut="rollOut(1)">
<img src="images/image2-out.gif" name="image2">
</a>

<a href="somewhere1.html" onMouseOver="rollOver(2)" onMouseOut="rollOut(2)">
<img src="images/image3-out.gif" name="image3">
</a>
</body>
charish2k1
05-03-2003, 03:19 PM
Uh, I don't want to seem lazy, but could you just give me the code or a code similar to the 1 I posted, but make it so that it has multiple image flips? Again, I don't want to seem lazy, but I'll learn it based off of the code given. Thanks. :D
fakeName
05-03-2003, 06:45 PM
Hey there.

You said:

"could you just give me the code or a code similar to the 1 I posted"

I gave you code, but I think I misunderstood what you wanted. I thought you just wanted a generic swap function that you could reuse for as many buttons as you need on one page.

Anyway, try these links.

Simple image swap:
http://www.pageresource.com/jscript/jhover.htm

Swap more than one image at once:
http://www.pageresource.com/jscript/jhover2.htm

Change one image to various other images when a viewer runs the mouse over a set of links:
http://www.pageresource.com/jscript/jhover3.htm
charish2k1
05-03-2003, 07:01 PM
Ahhh, thanks a lot.
fakeName
05-03-2003, 08:39 PM
You're welcome.