Member Avatar for Leratom

I need help, HTML--i have two links, linkA & linkB--when clicking linkA -should display image1
and whn clicking linkB image2 should be displayed.
The trick is they must be displayed in one image tag.

Any one who can hepl me?
I woukd appreciate your help.

  • 2 Contributors
  • 1 Reply
  • 88 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Airshow

Leratom,

Something like this maybe?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style>
</style>
<script>
onload = function(){
	var i;
	var myImgElement = document.getElementById("myImage");
	var links = document.getElementsByTagName('a');//find all <a> links
	for(i=0; i<links.length; i++){//loop through the a links
		if(links[i].className === 'imgSelector'){//is it an "imgSelector"
			links[i].onclick = function(){//attach handler to the link's onclick event.
				if(myImgElement){//safety - prevent javascript error if myImgElement is null.
					myImgElement.src = this.href;//set myImgElement's src to the link's href.
					return false;//suppress normal link behaviour
				}
			}
		}
	}
}
</script>
</head>

<body>

<a class="imgSelector" href="http://www.daniweb.com/alphaimages/misc/logo/logo.gif">Image 1</a><br />
<a class="imgSelector" href="http://www.daniweb.com/alphaimages/misc/navigation/community.gif">Image 2</a><br />
<img id="myImage" src="http://www.daniweb.com/alphaimages/misc/logo/logo.gif" border="0" alt="click links to change image">

</body>
</html>

Airshow

Edited by Airshow because: n/a
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.