subir - manipular imagenes con javascript
¿Cómo puedo devolver img.src haciendo clic en una imagen con javascript? (4)
Intento crear una función con javascript donde un usuario al hacer clic en una imagen puede recuperar ese src de imágenes como una URL. Soy muy nuevo en javascript y mis intentos hasta ahora para crear una función activada por "onclick" de una imagen son:
var showsrc = function(imageurl)
var img = new Image();
img.src = imageurl
return img.src
para llamar a los resultados que he estado tratando de insertar el image.src en mi html usando
document.getElementById("x").innerHTML=imageurl;
Estoy teniendo muy poco éxito. Cualquier ayuda sería muy apreciada. Gracias.
Aquí hay una solución ingenua con solo javascript (probablemente no compatible con varios navegadores):
<!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>
Creo que quieres algo como esto: http://jsfiddle.net/dLAkL/
Vea el código aquí:
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");
}
Las etiquetas de imagen no tienen un ''innerHTML'', ya que son etiquetas singleton, no pueden tener hijos. Si su x id es la etiqueta de la imagen en sí, entonces:
alert(document.getElementById(''x'').src);
escupiría el src de la imagen.
Probé esto en IE9 y Chrome 17. Agregue un controlador onclick al cuerpo (o el contenedor más cercano para todas sus imágenes) y luego monitoree si el elemento cliqueado es una imagen. Si es así, muestra la url.
var body = document.getElementsByTagName(''body'')[0];
body.onclick = function(e) {
if (e.srcElement.tagName == ''IMG'') alert(e.srcElement.src);
};