0

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>
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by Airshow
0

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

Edited by Airshow: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.