Why does trying to replace an image source browse to the image instead?
Clash Royale CLAN TAG#URR8PPP
Why does trying to replace an image source browse to the image instead?
I am new to JavaScript (only a couple of days of reading a book) and I am stuck on this code snippet. I have looked at it over and over again but cannot seem to figure out why it is not working. I am sure it is something really simple that I have just overlooked, and I just need a fresh pair of eyes to look at this.
The code is supposed to update a placeholder image on a page without the page having to reload. But when I am clicking on the link of an image, it is taking me to the link where the image is located instead of replacing the placeholder image. Here is my HTML code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
</li>
<li>
<a href="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
</li>
<li>
<a href="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
</li>
<li>
<a href="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
</li>
<li>
<a href="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
</li>
<li>
<a href="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
</li>
</ul>
<br />
<img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />
</body>
</html>
And here is the JavaScript function I am using to get this done:
<script type="text/javascript">
function showPic(whichpic)
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
</script>
Exact copy+paste duplicate of prior question Why does trying to replace an image source browse me to the image instead?
– halfer
Aug 12 at 15:10
I am trying to close this one again @BrianMoeskau, would you add a vote?
– halfer
Aug 12 at 15:10
2 Answers
2
You have two things trying to happen when you click on the hyperlinks:
Your return false; effectively "stops" the event handler from doing anything else so you're good there. However, storing the image's address in the HREF is probably a bad idea. Try something like this instead:
return false;
HREF
<ul>
<li>
<a href="#" img="images/cat.jpg" onclick="showPic(this); return false;" title="A Cat">Cat</a>
</li>
<li>
<a href="#" img="images/night.jpg" onclick="showPic(this); return false;" title="Night">Night</a>
</li>
<li>
<a href="#" img="images/coke.jpg" onclick="showPic(this); return false;" title="Coke">Coke</a>
</li>
<li>
<a href="#" img="images/sport.jpg" onclick="showPic(this); return false;" title="Sports">Sport</a>
</li>
<li>
<a href="#" img="images/mnms.png" onclick="showPic(this); return false;" title="MnM's">MnM's</a>
</li>
<li>
<a href="#" img="images/kid.jpg" onclick="showPic(this); return false;" title="A Kid">Kid</a>
</li>
</ul>
with your javascript functiong being something like this:
function showPic(whichpic)
var source = whichpic.getAttribute("img");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
Hey Jaxidian, I have tried this new code but now all the script is doing is just updating the link in the url bar to example.com/image_gallery.html#. The picture I am clicking on is not being displayed on its own page or in place of the placeholder image. I really appreciate the reply. Do you have another solution? Thanks again.
– three3
Apr 18 '10 at 15:10
Then you have some other problem (perhaps your file paths are wrong). This solution works. See here: jaxidian.org/so.htm
– Jaxidian
Apr 18 '10 at 15:15
WTF is the -1 for? This is a working solution... :-/
– Jaxidian
Apr 18 '10 at 15:16
Hey Jaxidian, Thanks the script is now working. :) The problem was the link to my javascript function: <script type="text/javascript" src="scripts/showPic.js"></script> For some reason, the function was not being called correctly and nothing was happening. When I put the function in the html file right under the body tag, it works great now. Thank you very much! Lol I was stuck for days. I am not sure why the -1 is there. I did not do that. I tried voting it up but it said I have to have at least 15 reputation points. Thanks again man.
– three3
Apr 18 '10 at 15:30
Wasn't me who minused, but custom attributes on elements are generally not a good idea.
– npup
Apr 18 '10 at 15:33
The example looked like it should be working.
Though, when one gets unexpected form submit or unexpected following links in this way (unexpected because your form's onsubmit or your a's onclick has a return false; in it), it is often due to your javascript code raising an exception, and the return false; is skipped.
form
onsubmit
a
onclick
return false;
return false;
See:
<a href="www.example.com" onclick="alertOrFollow(this); return false;">alert or follow?</a>
<script type="text/javascript">
function alertOrFollow(elem)
throw new Error('npup'); // try commenting this line out and things work as expected
alert(elem.href)
</script>
Your posted example looked fine i think, but maybe if your live version has some small differences? I'd suspect the placeholder element is not found, and setting the src attribute on it raises the exception that wrecks it.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Duplicate of stackoverflow.com/questions/2660623/…
– Brian Moeskau
Apr 18 '10 at 14:54