Change image on click

Question

iinviktus 0 Newbie Poster

12 Years Ago

Hi all- I'd like to change the buttons below used to change images to links/images instead. Any help would be appreciated! Thanks.

<!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>

javascript

2 Contributors
1 Reply
195 Views
10 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by 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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2011-11-27T15:20:53+00:00

Iinviktus,

First, the HTML:

<a href="#" class="imgSwap"><img src="path/to/image/far_east_button.gif" class="buttonImage" /></a>
<a href="#" class="imgSwap"><img src="path/to/image/middle_earth.gif" class="buttonImage" /></a>
<a href="#" class="imgSwap"><img src="path/to/image/europe.gif" class="buttonImage" /></a>

Then, buttonData:

var buttonData = [
	//titles added
	{src:'fareast.gif',    href:'http://google.com', title:'Far East'},
	{src:'middlearth.jpg', href:'http://yahoo.com',  title:'Middle Earth'},
	{src:'europe.jpg',     href:'http://chappo.cc',  title:'Europe'}
];

Then, the click handler:

$(".imgSwap").each(function(i) {
	var $b = $(this), d = buttonData[i] || buttonData[buttonData.length-1];
	$b.click(function() {
		$im1.attr({src:d.src, title:d.title, href:d.href});//note change to composition of title
		return false;//Added to suppresses default hyperlink action of <a> links.
	}).attr('title', d.title);
	if(i==0) { $b.click(); }
});

untested

Airshow