/    Sign up×
Community /Pin to ProfileBookmark

Image Flip

Copy linkTweet thisAlerts:
May 03.2003

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.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@fakeNameMay 03.2003 — 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>
Copy linkTweet thisAlerts:
@charish2k1authorMay 03.2003 — 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. ?
Copy linkTweet thisAlerts:
@fakeNameMay 03.2003 — 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
Copy linkTweet thisAlerts:
@charish2k1authorMay 04.2003 — Ahhh, thanks a lot.
Copy linkTweet thisAlerts:
@fakeNameMay 04.2003 — You're welcome.
×

Success!

Help @charish2k1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...