<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function showPic(whichPic){
  var imgSource = whichPic.getAttribute("href");
  var placeHolder = document.getElementById("placeholder");
  placeHolder.setAttribute("src", imgSource);
  placeHolder.setAttribute("height", 400);
}

</script>
<h1>Image placeholder</h1>
<a href="pics/wolf_1.jpg" onclick="showPic(this); return false;">Wolf 1</a>
<a href="pics/wolf_2.jpg" onclick="showPic(this); return false;">Wolf 2</a>
<a href="pics/wolf_3.jpg" onclick="showPic(this); return false;">Wolf 3</a>
<a href="pics/wolf_4.jpg" onclick="showPic(this); return false;">Wolf 4</a>
<a href="pics/wolf_5.jpg" onclick="showPic(this); return false;">Wolf 5</a><br>
<img id="placeholder" src="pics/placeholder.gif">
</body>
</html>

I want to loop through anchor tag so that I can embed code on <script> tag, not in line script like onclick="showPic(this); return false;" , do you have any solution?

It sounds like you want to dynamically add the phrase, 'onclidk="showPic(this); return false;" to your <a> tags instead of physically typing them inline one at a time. If that's correct, try this:

<html>
<head>
<title></title>
<script type="text/javascript">
var whichPic = null;
function showPic(whichPic){
  var imgSource = whichPic.getAttribute("href");
  var placeHolder = document.getElementById("placeholder");
  placeHolder.setAttribute("src", imgSource);
  placeHolder.setAttribute("height", 400);
}
function getAnchors() {
	var imageLink = document.getElementsByTagName('a');
	var totalImageLinks = imageLink.length;
	for(i=0;i<totalImageLinks;i++) {
		imageLink[i].setAttribute('onclick','showPic(this); return false;');
	}
}
</script>
</head>
<body onload=getAnchors()>
<h1>Image placeholder</h1>
<a href="pics/wolf_1.jpg">Wolf 1</a>
<a href="pics/wolf_2.jpg">Wolf 2</a>
<a href="pics/wolf_3.jpg">Wolf 3</a>
<a href="pics/wolf_4.jpg">Wolf 4</a>
<a href="pics/wolf_5.jpg">Wolf 5</a><br />
<img id="placeholder" src="pics/placeholder.gif">
</body>
</html>

Means you want to set id for anchor tag and when you click on that then get href of that and showing to you?

Moonknight,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
onload = function(){
	var wolfLinksContainer = document.getElementById("wolfLinksContainer");
	var wolfLinks = wolfLinksContainer.getElementsByTagName("a");
	var placeHolder = document.getElementById("placeholder");
	placeHolder.style.height = "400px";
	for(var i=0; i<wolfLinks.length; i++) {
		wolfLinks[i].onclick = function() {
			placeHolder.src = this.href;
			return false;
		};
	}
};
</script>
<body>

<h1>Image placeholder</h1>
<div id="wolfLinksContainer">
	<a href="pics/wolf_1.jpg">Wolf 1</a>
	<a href="pics/wolf_2.jpg">Wolf 2</a>
	<a href="pics/wolf_3.jpg">Wolf 3</a>
	<a href="pics/wolf_4.jpg">Wolf 4</a>
	<a href="pics/wolf_5.jpg">Wolf 5</a>
</div>
<img id="placeholder" src="pics/placeholder.gif">

</body>
</html>

Airshow

commented: This is right!!! +1

Jpietrangelo,

I'm afraid that element.setAttribute('onclick','...'); won't work.

Whereas HTML makes "onclick" look like an attribute, it is in fact an event.

In javascript, event handlers need to be attached with element.onclick = fn; , where fn is either the name of a function defined elsewhere (in scope) or an anonymous function defined at this point in the code (as per my post above).

For completeness, you can also make a function call element.onclick = fn(data); providing fn returns a function. This is a very useful pattern, which creates a "closure" containing data , which remains available to the returned function even after fn has completed and returned!

Airshow

How strange. Moonknight33 posts 12 hours ago, then three of us reply at the same time!

Actually, it works fine. However, I understand what you are saying and thank you for the clarification.

Jim

Jpietrangelo,

I'm afraid that element.setAttribute('onclick','...'); won't work.

Whereas HTML makes "onclick" look like an attribute, it is in fact an event.

In javascript, event handlers need to be attached with element.onclick = fn; , where fn is either the name of a function defined elsewhere (in scope) or an anonymous function defined at this point in the code (as per my post above).

For completeness, you can also make a function call element.onclick = fn(data); providing fn returns a function. This is a very useful pattern, which creates a "closure" containing data , which remains available to the returned function even after fn has completed and returned!

Airshow

Jpietrangelo,

Well I have learned something because I thought that wouldn't work in any browser but maybe it's just IE.

Which browser did you test in?

Airshow

Aha.

Reading here we learn that the HTML 4.0 inteface is now a legacy thing superceded by the "DOM Event Model", under which "event listeners are no longer stored as attribute values", whilst still supporting HTML 4.0 event listeners.

MS never implemented a javascript interface in IE to mimic HTML 4.0 event listeners, whilst Moz/derivitives, from what you say, clearly did (and still do!).

I just tried your code in FF and you're quite right - it works - but not in IE.

Airshow

Of course, if the problem is that IE can't handle something, then just use jQuery and write the javascript as such:

<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('a').click(function() {	
			var newPh = $(this).attr('href');
			$('img#placeholder').css({
				'width' : 400,
				'height' : 400
			});
			$('img#placeholder').attr('src',newPh);			
			return false;
		});
	});
</script>
</head>
<body>
<h1>Image placeholder</h1>
<a href="pics/wolf_1.jpg">Wolf 1</a>
<a href="pics/wolf_2.jpg">Wolf 2</a>
<a href="pics/wolf_3.jpg">Wolf 3</a>
<a href="pics/wolf_4.jpg">Wolf 4</a>
<a href="pics/wolf_5.jpg">Wolf 5</a><br />
<img id="placeholder" src="pics/placeholder.gif">
</body>
</html>

Now it works in all browsers.

It's OK, IE can handle this without jQuery as per my first post in this topic. But it can't perform .setAttibute('onclick', 'js_string') , which was a proprietary Moz thing never implemented by MS and not adopted by W3C in favour of the DOM Event Listeners approach and element.onclick= , which are now universal (at least as universal as things get in this funny world).

Airshow

Thanks for all your help, problem solved, i used <ul id=""> and do like Airshow :) Work perfectly.

This is my code:

<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript">
window.onload = prepareShowPic;
function prepareShowPic(){
var gallery = document.getElementById("imageGallery");
var links = gallery.getElementsByTagName("a");

for (i=0; i<links.length; i++){
  links[i].onclick = function(){
    showPic(this);
    return false;
  }
}

}

function showPic(whichPic){
  var imgSource = whichPic.getAttribute("href");
  var imgAlt = whichPic.getAttribute("alt");
  var placeHolder = document.getElementById("placeholder");
  var placeAlt = document.getElementById("placeAlt");
  placeHolder.setAttribute("src", imgSource);
  placeHolder.setAttribute("height", 400);
  placeAlt.innerHTML = imgAlt;
  
}

</script>
<h1>Image Gallery</h1>
<ul id="imageGallery">
<li><a href="pics/wolf_1.jpg" alt="This wolf is so cute">Wolf 1</a></li>
<li><a href="pics/wolf_2.jpg" alt="This is a white wolf">Wolf 2</a></li>
<li><a href="pics/wolf_3.jpg" alt="This is wolf in anime">Wolf 3</a></li>
<li><a href="pics/wolf_4.jpg" alt="Wolf is crying!!!">Wolf 4</a></li>
<li><a href="pics/wolf_5.jpg" alt="A brown wolf...">Wolf 5</a></li>
</ul><br><br>
<img id="placeholder" src="pics/placeholder.gif">
<div id="placeAlt">Click on link to view the images</div>
</body>
</html>