/    Sign up×
Community /Pin to ProfileBookmark

Swap Image Help

Copy linkTweet thisAlerts:
Aug 15.2005

Alright… I’m going to do my best to try and explain what I want to do. I have several photos lining the top of a site. When you roll over the photo it swaps to a second photo in the same spot. I have set the behavior to not restore the image so it will only swap once and stay when you move your mouse away. What I’d like to do is be able to have the user roll their mouse back over that image and change it back to the original image and stay when they move their mouse away. So I basically just want the image to change when they roll their mouse over it.

Does this make sense? Any suggestions?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jonny_LangAug 15.2005 — artmonkey:

Suggestions for future posts:

Avoid the use of: "I want..."

Address EVERY respondent by NAME.

Test posted code AS IS, before declaring "that don't work!"

Observe, simple, common courtesies.


[CODE]<HTML>
<Head>
<Script Language=JavaScript>

var toggleFlag = new Array();
toggleFlag[0] = '0';
toggleFlag[1] = '0';
toggleFlag[2] = '0';
toggleFlag[3] = '0';

function SwapImage(curr,prefix){

pathStr = '1/';
if (toggleFlag[curr] == '0')
{
document.getElementById(curr).src = pathStr+prefix+'2.jpg';
toggleFlag[curr] = '1';
}
else {
document.getElementById(curr).src = pathStr+prefix+'1.jpg';
toggleFlag[curr] = '0'
}
}
</Script>
</Head>
<Body>
<center>
<img src='1/A1.jpg' id='0' onmouseover="SwapImage(this.id,'A')">
<img src='1/B1.jpg' id='1' onmouseover="SwapImage(this.id,'B')">
<img src='1/C1.jpg' id='2' onmouseover="SwapImage(this.id,'C')">
<img src='1/D1.jpg' id='3' onmouseover="SwapImage(this.id,'D')">
</center>
</Body>
</HTML>[/CODE]
Copy linkTweet thisAlerts:
@artmonkeyauthorAug 15.2005 — Thanks for the reply Johnny Lang and for the advice. I'll keep it in mind. I'm having problems getting the code to work that you provided. The original image loads fine, but the rollover is not showing up. Here's what I've put in the link:

<img src=images/pic1.jpg' id='0' onmouseover="SwapImage(this.id,'images/pic1-roll.jpg')">

Am I doing something wrong?
Copy linkTweet thisAlerts:
@Jonny_LangAug 15.2005 — artmonkey:

Sorry, but the code I posted works, AS IS.

If you don't know what AS IS means, it means, copy the code I posted, and paste it into a blank NotePad document. Then save it with the name of your choice, giving it the .html extension.

Pay attention to the path.

If all of your images are in the SAME folder as the MAIN Document, then, in the example code I posted, eliminate all references to the folder name 1/

OTHERWISE, create a folder, named 1, and then test the code AS IS.

Please, don't try to chop and slop the code into your existing document.

Take the code I posted and get it to work AS IS, before you attempt to incorporate it into another document.
Copy linkTweet thisAlerts:
@Jonny_LangAug 15.2005 — artmonkey:

Yes, just quickly looking at your code, you omitted a quote:

This:

<img src=images/pic1.jpg' id='0' onmouseover="SwapImage(this.id,'images/pic1-roll.jpg')">


should be:

<img src='images/pic1.jpg' id='0' onmouseover="SwapImage(this.id,'images/pic1-roll.jpg')">

notice the first quote after src= is missing in your code.
Copy linkTweet thisAlerts:
@artmonkeyauthorAug 16.2005 — Johnny Lang:

I apologize for my comments about your code. Apparently I don't understand this stuff as much as I thought I did. You were right... your code works perfectly. I did what you instructed in your last post and everything worked great. Thank you so much for your help and patience.

-Artmonkey
Copy linkTweet thisAlerts:
@Jonny_LangAug 16.2005 — Artmonkey:

You're welcome. I appreciate your courtesy. Good luck with the remainder of your project.
×

Success!

Help @artmonkey 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 5.16,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...