/    Sign up×
Community /Pin to ProfileBookmark

Image change in Java Script

Copy linkTweet thisAlerts:
Mar 12.2006

Hi ? I need a java script code that does the following:

When i click an image, it will change and in its place, second picture will appear. And when i click that second picture also the first picture will appear… How can i do that?

Thanks…

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@masterofstuffMar 12.2006 — First, you need to set up a default image and name it.

ex:

<img src="pic1.jpg" name="first">

then you'll need more images.

<img src="pic2.jpg" name="second">

This by itself will not work, of course.

you'll need a link to change these pics, hope it's not a problem.

<a href="#" onClick="document.first.src='pic2.jpg'>link text</a>

tell me if it helps.
Copy linkTweet thisAlerts:
@crazycoderMar 12.2006 — Here, this is if you want each image to replace the other, which is I think what you want to do. That makes it a little more complex than if you have two seperate images, but it's still really easy. Put this in your head command:

[CODE]
<script language="JavaScript">
var i = 0;
function bla()
{
if (i == 0)
{
document.image.src='source.gif';
i = 1;
}
else
{
document.image.src='source2.gif';
i = 0;
}
}
</script>[/CODE]

Then all you need to do is in the body insert:

[CODE]<img src='source.gif' name='image' onclick='bla()'>[/CODE]

That should do the trick.
Copy linkTweet thisAlerts:
@Sleep_ModeauthorMar 12.2006 — Yes. It worked... Thank you masterofstuff and crazycoder. ?
Copy linkTweet thisAlerts:
@Sleep_ModeauthorMar 12.2006 — But, i will use it for many pictures, how can i add a parameter to this function their names?

i tried:

[code=html]<img src='1.jpg' width="80" height="80" name='image' onclick='changePic("1.jpg","image")'>[/code]

and in the script i did:

[code=html]function changePic(pic,picname)
{
if (i == 0)
{
document.picname.src=pic;
i = 1;
}
else
{
document.picname.src='2.jpg';
i = 0;
}
}[/code]

But it didnt work out?
Copy linkTweet thisAlerts:
@hansfromhollandMar 12.2006 — I do react upon your question because it looks a bit like my question a while back. I have a page with a lot of small pictures and each of those pictures is clickable and leads to a magnified version in another page. Then you can go through all the enlargements by simply pressing the > or < on your keyboard. Clicking on an enlargement brings you back to the page with the small pictures.

If you want to see this in action, go [URL=http://www.hhdesign.nl/example/example.htm]here.[/URL]

I hope you can use this piece of script.
Copy linkTweet thisAlerts:
@Sleep_ModeauthorMar 12.2006 — Thank you hans. But i can not see any javascript here. Is there anyone that will answer my question about passing the parameter to this function?
Copy linkTweet thisAlerts:
@Sleep_ModeauthorMar 12.2006 — ok i made it thanks... ?
Copy linkTweet thisAlerts:
@hansfromhollandMar 12.2006 — This line uses a small picture as a hyperlink:

[code=html]<a href="pictures.htm?2"><img border="0" src="s_pic_2.jpg" width="300" height="388">[/code]

and it jumps to this file which shows the second picture in the array: the pictures of this array are called pic_1.jpg, pic_2.jpg, pic_3.jpg and pic_4.jpg.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>example</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<script language="JavaScript">
<!--
var key = new Array();
key[','] = -1; key['<'] = key[','];
key['.'] = +1; key['>'] = key['.'];
var photo = new Array(
1,2,3,4,'');
var max = photo.length - 2;
var nr = 0;
function show(x) {
nr += x;
if (nr < 0) nr = max;
if (nr > max) nr = 0;
document.thePhoto.src = 'pic_' + photo[nr] + '.jpg';
};
function firstPhoto() {
var ls = unescape(location.search).replace(/?/g,'');
for (var i = 0; i < max+1; i++) if (ls == photo[i]) nr = i;
show(0);
};
function getKey(keyStroke) {
if (typeof(event) == 'object') {
eventChooser = event.keyCode;
} else if (typeof(keyStroke) == 'object') {
eventChooser = keyStroke.which;
} else {
eventChooser = 0;
};
var which = String.fromCharCode(eventChooser).toLowerCase();
if (typeof(key[which]) == 'number') show(key[which]);
};
document.onkeypress = getKey;
// -->
</script>
</head>
<body scroll="no" onload="firstPhoto()">
<center>
<a href="JavaScript:history.back();"><img name="thePhoto" src="#" border="0" width="100%" title="Click left to go back or type < for the previous or > for the next picture."></a><br>
<br>
<a href="JavaScript:show(-1);"></a><a href="JavaScript:show(+1);"></a>
</center>
</body>
</html>[/code]
×

Success!

Help @Sleep_Mode 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.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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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