如何通過點擊帶有javascript的圖像返回img.src？

Question

我正在嘗試使用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;

我很少成功。 任何幫助將不勝感激。 謝謝。

Answer 1

我在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);  
};

Answer 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");
}

Answer 3

圖像標簽沒有'innerHTML'，因為它們是單例標簽 - 它們不能有任何子標簽。 如果你的x id是圖片標簽本身，那么：

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

會吐出圖像的src。

Answer 4

這是一個簡單的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>

如何通過點擊帶有javascript的圖像返回img.src？

問題描述

4 個解決方案

解決方案1
3 2012-03-14 18:04:39

解決方案2
2 2012-03-14 18:05:11

解決方案3
0 2012-03-14 17:52:49

解決方案4
0 2012-03-14 17:59:15

如何通過點擊帶有javascript的圖像返回img.src？

問題描述

4 個解決方案

解決方案1 3 2012-03-14 18:04:39

解決方案2 2 2012-03-14 18:05:11

解決方案3 0 2012-03-14 17:52:49

解決方案4 0 2012-03-14 17:59:15

解決方案1
3 2012-03-14 18:04:39

解決方案2
2 2012-03-14 18:05:11

解決方案3
0 2012-03-14 17:52:49

解決方案4
0 2012-03-14 17:59:15