admin管理员组

文章数量:1434960

I am trying to create a function with javascript where a user upon clicking on an image can retrieve that images src as a URL. I am very new to javascript and my attempts so far at creating a function activated by "onclick" of an image are:

var showsrc = function(imageurl)
var img = new Image();
img.src = imageurl
return img.src

to call the results i have been trying to insert the image.src into my html using

document.getElementById("x").innerHTML=imageurl;

Im having very little success. Any help would be greatly appreciated. Thank you.

I am trying to create a function with javascript where a user upon clicking on an image can retrieve that images src as a URL. I am very new to javascript and my attempts so far at creating a function activated by "onclick" of an image are:

var showsrc = function(imageurl)
var img = new Image();
img.src = imageurl
return img.src

to call the results i have been trying to insert the image.src into my html using

document.getElementById("x").innerHTML=imageurl;

Im having very little success. Any help would be greatly appreciated. Thank you.

  • javascript
  • onclick
  • imagesource
Share Improve this question asked Mar 14, 2012 at 17:51 Maximilian TravisMaximilian Travis 3311 gold badge5 silver badges13 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

I tested this in IE9 and Chrome 17. Add an onclick handler to the body (or nearest container for all your images) and then monitor if the clicked element is an image. If so show the url.

http://jsfiddle/JbHdP/

var body = document.getElementsByTagName('body')[0];
body.onclick = function(e) {
    if (e.srcElement.tagName == 'IMG')    alert(e.srcElement.src);  
};​

I think you want something like this: http://jsfiddle/dLAkL/

See code here:

HTML:

<div id="urldiv">KEINE URL</div>
<div>
    <img src="http://www.scstattegg.at/images/netz-auge.jpg" onclick="picurl(this);">
    <img src="http://www.pictokon/bilder/2007-06-g/sonnenhut-bestimmung-pflege-bilder.jpg.jpg" onclick="picurl(this);">
</div>​

JAVASCRIPT

picurl = function(imgtag) {
    document.getElementById("urldiv").innerHTML = imgtag.getAttribute("src");
}​

Image tags do not have an 'innerHTML', since they're singleton tags - they cannot have any children. If your x id is the image tag itself, then:

 alert(document.getElementById('x').src);

would spit out the src of the image.

Here's a naïve solution with just javascript (probably not cross-browser patible):

<!doctype html>
<html>
  <head>
    <script>
      function init() {
        var images = document.getElementsByTagName('img');

        for(var i = 0, len = images.length; i < len; i++) {
          images[i].addEventListener('click', showImageSrc);
        }
      }

      function showImageSrc(e) {
        alert(e.target.src);
      }
    </script>
  </head>
  <body onload="init()">
    <img src="http://placekitten./300/300">
  </body>
</html>

本文标签： onclickHow can i return imgsrc by clicking on an image with javascriptStack Overflow

版权声明：本文标题：onclick - How can i return img.src by clicking on an image with javascript? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745623887a2666852.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。