Please help me in this Image Placeholder

Question

moonknight33 0 Newbie Poster

13 Years Ago

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

javascript

4 Contributors
13 Replies
236 Views
2 Days Discussion Span
Latest Post 13 Years Ago Latest Post by moonknight33

jpietrangelo 4 Newbie Poster

13 Years Ago

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>

morteza_ipo 0 Junior Poster in Training

13 Years Ago

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

Airshow 416 WiFi Lounge Lizard

13 Years Ago

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

moonknight33 commented: This is right!!! +1

morteza_ipo 0 Junior Poster in Training

13 Years Ago

Airshow code is more accurate!

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-01-11T00:19:38+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2011-01-11T00:24:12+00:00

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

jpietrangelo 4 Newbie Poster · Answer 3 · 2011-01-11T00:31:24+00:00

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

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 4 · 2011-01-11T00:46:55+00:00

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

jpietrangelo 4 Newbie Poster · Answer 5 · 2011-01-11T00:50:24+00:00

jpietrangelo 4 Newbie Poster

13 Years Ago

Both Firefox and Safari.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 6 · 2011-01-11T03:01:04+00:00

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

jpietrangelo 4 Newbie Poster · Answer 7 · 2011-01-11T05:27:36+00:00

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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 8 · 2011-01-11T05:44:50+00:00

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

moonknight33 0 Newbie Poster · Answer 9 · 2011-01-12T17:33:51+00:00

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>