0
<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?

4
Contributors
13
Replies
14
Views
6 Years
Discussion Span
Last Post by moonknight33
Featured Replies
  • 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: [code] <html> <head> <title></title> <script type="text/javascript"> var whichPic = null; function showPic(whichPic){ var imgSource = whichPic.getAttribute("href"); var placeHolder … Read More

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

  • 1

    Moonknight, [CODE=html] <!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; }; } … Read More

  • Airshow code is more accurate! Read More

  • 1

    Jpietrangelo, I'm afraid that [ICODE]element.setAttribute('onclick','...');[/ICODE] 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 [ICODE]element.onclick = fn;[/ICODE], where fn is either the name of a function defined elsewhere (in scope) or an anonymous function … Read More

1

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

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

1

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

Votes + Comments
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

1

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

1

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

1

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

1

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

1

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.

1

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

Edited by Airshow: n/a

0

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>

Edited by moonknight33: n/a

This question has already been answered. 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.