/    Sign up×
Community /Pin to ProfileBookmark

Javascript Image Changing Script

Copy linkTweet thisAlerts:
Nov 29.2004

Okay, I’m making a site and I need to have a script where there’s an image and let’s say two links.

When a link is clicked I want the image to change into another image.

image: ?
link1: :p
link2: 😮

when I click on ‘link1’ I want the ‘image( ? )’ to change into a :p

(images are all the same size)

Can anyone help me with this or provide me with a code?

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@mityaNov 29.2004 — Just a matter of JS controlling the arguments given to objects, in this place the image.src argument.

[code=php]function changeImg(mouseOverOrOut, id) {
if (mouseOverOrOut == "over") {
image = 'image_over.gif';
} else {
image = 'image_out.gif';
}
document.getElementById(id).src = image;
}[/code]

Links:

<a href="#" onMouseOver="javascript:changeImg('over', 'img1')" onMouseOut="javascript:changeImg('out', 'img1')">link</a>
Copy linkTweet thisAlerts:
@Warren86Nov 29.2004 — <HTML>

<Head>

<Script Language=JavaScript>

var flipImg = "flip.jpg"
var flopImg = "flop.jpg"

function swapImg(isImg){

document.getElementById('swapImg').src = isImg;
}

</Script>

</Head>

<Body>

<img src='flip.jpg' id='swapImg'>

<br>

<a href=# onclick="swapImg(flipImg)"> Link 1 </a><br>

<a href=# onclick="swapImg(flopImg)"> Link 2 </a><br>

</Body>

</HTML>
Copy linkTweet thisAlerts:
@mityaNov 29.2004 — Warren, is it me or are we posting the same code? Interesting, Americans ?
Copy linkTweet thisAlerts:
@laZORauthorNov 29.2004 — Thanks Warren86! Your script really helped, it didn't work at first but I fiddled around with it and it worked like a charm ?!


<HTML>

<Head>

<Script Language=[B]"[/B]javascript[B]"[/B]><!--

var flipImg = "flip.jpg"

var flopImg = "flop.jpg"

function swapImg(isImg){

document.getElementById('swapImg').src = isImg;

}

//--></Script>

</Head>

<Body>

<img src='flip.jpg' id='swapImg'>

<br>

<a href=[B][U]# onclick=[/U]"javascript:[/B]swapImg(flipImg)"> Link 1 </a><br>

<a href=[B][U]# onclick=[/U]"javascript:[/B]swapImg(flopImg)"> Link 2 </a><br>

</Body>

</HTML>


As I said before, thanks, I really appreciate it. ?

Sorry mitya but I just didn't get the jist of yours.
Copy linkTweet thisAlerts:
@Warren86Nov 29.2004 — You're welcome, but it worked fine for me, the way I posted it, I wouldn't have posted it otherwise. The way you have modified it, is close to the way I specifically wanted to avoid.

<a href=javascript:swapImg(flipImg)> Link 1 </a>


Whatever.
×

Success!

Help @laZOR 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.24,
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,
)...