如何通過點擊一個圖像與JavaScript返回img.src？

我想用JavaScript創建一個函數，用戶點擊圖像後可以將該圖像src作爲URL進行檢索。我非常新的JavaScript和我的努力迄今創造的「點擊」圖像的激活的功能有：如何通過點擊一個圖像與JavaScript返回img.src？

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

打電話，結果我一直在嘗試使用插入image.src到我的HTML

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

具有非常收效甚微林。任何幫助將不勝感激。謝謝。

來源

2012-03-14 Max Travis

圖片標籤沒有'innerHTML'，因爲它們是單身標籤 - 他們不能有任何孩子。如果您x id是圖像標籤本身，則：

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

會吐出圖像的src。

來源

2012-03-14 17:52:49

這裏只用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-14 17:59:15

我測試了在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-14 18:04:39 mrtsherman

我喜歡這個解決方案，但是如果你有任何「風格」的圖片包含在''中，你也可以得到它們:) – Neysor 2012-03-14 18:09:44

這是真的。 OP應該可能添加一個類來定位圖像，或者只將點擊處理程序綁定到圖像的容器。如果使用類，則可以使用'e.srcElement.className =='marker''來過濾。 https://developer.mozilla.org/en/DOM/element.className – mrtsherman 2012-03-14 18:23:05

我想你想是這樣的：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-14 18:05:11 Neysor

如何通過點擊一個圖像與JavaScript返回img.src？

回答

相關問題