3

我正在尝试使用 javascript 创建一个函数，用户在单击图像时可以将该图像 src 作为 URL 检索。我对javascript非常陌生，到目前为止，我尝试创建一个由图像的“onclick”激活的功能是：

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

调用结果我一直在尝试使用将 image.src 插入到我的 html 中

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

我几乎没有成功。任何帮助将不胜感激。谢谢你。

4

4 回答 4

3

我在 IE9 和 Chrome 17 中对此进行了测试。将 onclick 处理程序添加到正文（或所有图像的最近容器），然后监视单击的元素是否是图像。如果是这样显示网址。

http://jsfiddle.net/JbHdP/

var body = document.getElementsByTagName('body')[0];
body.onclick = function(e) {
    if (e.srcElement.tagName == 'IMG')    alert(e.srcElement.src);  
};​
于 2012-03-14T18:04:39.070 回答
2

我想你想要这样的东西：http: //jsfiddle.net/dLAkL/

请参阅此处的代码：

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.net/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");
}​
于 2012-03-14T18:05:11.223 回答
0

图片标签没有“innerHTML”，因为它们是单例标签——它们不能有任何子标签。如果您的xid 是图像标签本身，则：

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

会吐出图像的src。

于 2012-03-14T17:52:49.420 回答
0

这是一个仅使用 javascript 的天真的解决方案（可能不兼容跨浏览器）：

<!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.com/300/300">
  </body>
</html>
于 2012-03-14T17:59:15.950 回答