change image onclick

Question

ibn_sumal 0 Newbie Poster

13 Years Ago

I have 3 images and 3 buttons, once a button is clicked its image will be displayed in a box. Now i want to be able to link each image to a different page once it is clicked on, so far i can only link all 3 images to the same page. How can i do this? Here's the code

<img src="austria.jpg" name="im1" height="300" width="300" onclick="window.open('http://google.com')"/><br/> 
<button onclick="document.images.im1.src='austria.jpg';">Austria</button>
<button onclick="document.images.im1.src='korea.jpg';">Korea</button>
<button onclick="document.images.im1.src='brazil.jpg';">Brazil</button>

note: i'm a beginner at this.

javascript

4 Contributors
15 Replies
1K Views
4 Days Discussion Span
Latest Post 13 Years Ago Latest Post by Luckychap

Luckychap 68 Posting Pro in Training

13 Years Ago

<img src="austria.jpg" name="im1" height="300" width="300" onclick="window.open('http://google.com')"/><br/> 
<button onclick="document.images.im1.src='austria.jpg'; document.images.im1.onclick='window.open(\'http://google.com\')'">Austria</button>
<button onclick="document.images.im1.src='korea.jpg'; document.images.im1.onclick='window.open(\'http://yahoo.com\')'">Korea</button>
<button onclick="document.images.im1.src='brazil.jpg'; document.images.im1.onclick='window.open(\'http://chapo.co.cc\')'">Brazil</button>

Luckychap 68 Posting Pro in Training

13 Years Ago

What happened? Any errors?

migcosta 13 Junior Poster

13 Years Ago

ibn_sumal...
Luckychap code is correct.. and I have tested it.. it works perfectly...
what is your browser and operational system?

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Ibn,

Post your whole test page. There's got be an error in it somewhere.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ibn_sumal 0 Newbie Poster · Answer 1 · 2011-06-15T08:07:31+00:00

Luckychap it doesn't work, just to clarify what i want to do is:

1. click on button
2. image from selected button is displayed
3. click on the image to open a new link/page

ibn_sumal 0 Newbie Poster · Answer 2 · 2011-06-16T01:03:52+00:00

well nothing happens, after adding your bit of code when I now click on the button it doesn't even display the image.

ibn_sumal 0 Newbie Poster · Answer 3 · 2011-06-16T07:24:39+00:00

I've tried in both chrome and firefox 4 and it only changes the images but does nothing when i click on them.

I'm using Windows Vista

Luckychap 68 Posting Pro in Training · Answer 4 · 2011-06-16T11:06:30+00:00

Hi ibn_sumal,
I guess you taken care of single and double quotes while putting url strings.

ibn_sumal 0 Newbie Poster · Answer 5 · 2011-06-16T23:55:40+00:00

Here is my full code (original one)

<!DOCTYPE html>

<html>
<head>
<title>Js Testing</title>
<link rel="stylesheet" type="text/css" href="da.css">

</head>

<body>

<div id="header">
<h1>Javascript Testing</h1>
</div>

<div class="rollover">

<img src="fareast.gif" name="im1" height="300" width="300" onclick="window.open('http://google.com')" /><br/> 
<button onclick="document.images.im1.src='fareast.gif'">Far East</button>
<button onclick="document.images.im1.src='middlearth.jpg'">Middle earth</button>
<button onclick="document.images.im1.src='europe.jpg'">Europe</button>

</div>

</body>
</html>

This is when i add Luckychap's code

<!DOCTYPE html>

<html>
<head>
<title>Js Testing</title>
<link rel="stylesheet" type="text/css" href="da.css">

</head>

<body>

<div id="header">
<h1>Javascript Testing</h1>
</div>

<div class="rollover">

<img src="fareast.gif" name="im1" height="300" width="300" onclick="window.open('http://google.com')"/><br/> 
<button onclick="document.images.im1.src='fareast.gif'; document.images.im1.onclick='window.open(\'http://google.com\')'">Far east</button>
<button onclick="document.images.im1.src='middlearth.jpg'; document.images.im1.onclick='window.open(\'http://yahoo.com\')'">Middle earth</button>
<button onclick="document.images.im1.src='europe.jpg'; document.images.im1.onclick='window.open(\'http://chapo.co.cc\')'">Europe</button>

</div>

</body>
</html>

Only changes the images but links don't work.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2011-06-17T02:44:58+00:00

ibn,

Your page with Luckychap's code works fine here - Opera 11.11. It's hard to say what might be wrong.

If you are browsing a local file, then check your file extension is .html or .htm.

You could try changing the doctype and html tags to XHTML (providing the rest of the page is not reliant on any features of HTML5):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

If that still doesn't work, then try doing everything without any javascript embedded inside HTML tags. Here's a demo that uses jquery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
onload = function() {
	var buttonData = [
		{src:'fareast.gif',    href:'http://google.com'},
		{src:'middlearth.jpg', href:'http://yahoo.com'},
		{src:'europe.jpg',     href:'http://chappo.cc'}
	];
	var $im1 = $("[name='im1']").click(function(){ window.open($(this).attr('href')); });
	$(".imgSwap").each(function(i) {
		var $b = $(this), d = buttonData[i] || buttonData[buttonData.length-1];
		$b.click(function() { $im1.attr({src:d.src,title:$(this).html(),href:d.href}); });
		if(i==0) { $b.click(); }
	});
};
</script>
</head>

<body>

<img name="im1" height="300" width="300" /><br/>
<button class="imgSwap">Far East</button>
<button class="imgSwap">Middle Earth</button>
<button class="imgSwap">Europe</button>
</body>
</html>

Airshow

Luckychap 68 Posting Pro in Training · Answer 7 · 2011-06-17T09:21:34+00:00

Hmm ... I tested my code on chrome ... and was not working when it comes to changing 'onclick' for image. I have no idea why it was happening. I also tried changing doc type as mentioned by Airshow, but still 'onclick' attribute was not changing.

Airshow's method uses jQuery lib to achieve this and I am sure it will work. But for such a simple thing you don't have to load such big lib. It can be done with few lines of code:

<!DOCTYPE html>

<html>
<head>
<title>Js Testing</title>
<link rel="stylesheet" type="text/css" href="da.css">

</head>

<body>

<div id="header">
<h1>Javascript Testing</h1>
</div>

<script>

/*Image data: src, link */
var data = [
	{src: "fareast.gif", link: "http://google.com"},
	{src: "middlearth.jpg", link: "http://yahoo.com"},
	{src: "europe.jpg", link: "http://chapo.co.cc"}
];

/* This function will be called when button is clicked.*/
function buttonClick(index) {
    if(!data[index]) {
	    alert("No data found at index : " + index);
		return;
	}
	var src = data[index].src;
	var link = data[index].link;
	
	var img = document.images.im1;
	
        /* Changing image attributes */
	img.src = src;
	img.onclick = function() {
		window.open(link);
	};
}
</script>

<div class="rollover">

<img src="fareast.gif" name="im1" height="300" width="300" onclick="window.open('http://google.com')"/><br/> 
<button onclick="buttonClick(0);">Far east</button>
<button onclick="buttonClick(1);">Middle earth</button>
<button onclick="buttonClick(2);">Europe</button>

</div>
</body>
</html>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2011-06-17T10:26:42+00:00

Hi Lucky,

Out of interest, does Chrome play ball with any of the variants we have posted between us? I don't have Chrome on this netbook (it's new and I'm trying to keep the hd/registgry as clean as possible).

I guess the proper thing to do is to wrap the <img> tag in an anchor <a href="..."></a> . It's bit optimistic to hope that all browsers respond to a click on a raw <img>.

Airshow

Luckychap 68 Posting Pro in Training · Answer 9 · 2011-06-17T10:34:48+00:00

Hi Airshow,

I don't know why incline code was not working when it comes to change 'onclick' attribute of image. If 'src' attribute can be changed why not 'onlick'. Is this a bug.

Yaa wrapping image in <a></a> make sense we can sure try this. This will definitely work on all browser.

ibn_sumal 0 Newbie Poster · Answer 10 · 2011-06-17T21:43:32+00:00

Thanks for the help lads, I used Lucky's code since it looked easier to comprehend. If i could ask 1 more question thought what does the "index" bit do?

Luckychap 68 Posting Pro in Training · Answer 11 · 2011-06-18T00:10:58+00:00

'index' is the index (0, 1, 2 ....) for the array 'data' which holds data for image tag. This index is passed through onclick function of buttons ie 'buttonClick'.

Check <botton> tag in above code to see how index is passed.

<button onclick="buttonClick(0);">Far east</button>     <!-- index = 0 -->
<button onclick="buttonClick(1);">Middle earth</button> <!-- index = 1 -->
<button onclick="buttonClick(2);">Europe</button>       <!-- index = 2 -->