¿Cómo agrego un evento .click() a una imagen?

Tengo un script que coloca una imagen basada en un clic del mouse gracias a Jose Faeti. Ahora necesito ayuda para agregar un evento .click() al código siguiente, de modo que cuando un usuario haga clic en la imagen, realice la función que se muestra en el script.¿Cómo agrego un evento .click() a una imagen?

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

Pongo el código completo a continuación, en caso de que quiera verlo.

<html> 
<head> 
<script language="javascript" type="text/javascript"> 
<!-- 

document.getElementById('foo').addEventListener('click', function (e) { 

var img = document.createElement('img'); 

img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png'); 

e.target.appendChild(img); 
}); 

    // --> 
</script> 

</head> 

<body> 
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click() 
</body> 
</html>

¿Ayuda?

Fuente

2011-09-10 SS'

algún motivo que no sólo está usando jQuery? En cualquier caso, está creando un elemento DOM para la imagen, agregar un oyente a eso es lo mismo que agregar un oyente a cualquier otro elemento DOM, que ya sabe cómo hacer. –

En primer lugar, esta línea

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()

va a mezclar HTML y JavaScript. No funciona así. Deshágase de .click() allí.

Si leyó el código JavaScript que tiene, document.getElementById('foo') está buscando un elemento HTML con un ID de foo. No tienes uno. Dar a su imagen que ID:

<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />

Como alternativa, podría tirar la JS en una función y poner onclick en el código HTML:

<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />

le sugiero que leer un poco para arriba en JavaScript y HTML, aunque .

Los otros tienen razón sobre la necesidad de mover el <img> por encima de la unión JS demasiado clic.

Fuente

2011-09-10 20:49:35 mpen

No se puede obligar a un evento para el elemento antes de que exista, por lo que debe hacer en caso onload:

<html> 
<head> 
<script type="text/javascript"> 

window.onload = function() { 

    document.getElementById('foo').addEventListener('click', function (e) { 
    var img = document.createElement('img'); 
    img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png'); 
    e.target.appendChild(img); 
    }); 

}; 

</script> 
</head> 
<body> 
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" /> 
</body> 
</html>

Fuente

2011-09-10 20:50:00 Guffa

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 
<script type="text/javascript" src="jquery-2.1.0.js"></script> 
<script type="text/javascript" > 
function openOnImageClick() 
{ 
//alert("Jai Sh Raam"); 
// document.getElementById("images").src = "fruits.jpg"; 
var img = document.createElement('img'); 
img.setAttribute('src', 'tiger.jpg'); 
    img.setAttribute('width', '200'); 
    img.setAttribute('height', '150'); 
    document.getElementById("images").appendChild(img); 


} 


</script> 
</head> 
<body> 

<h1>Screen Shot View</h1> 
<p>Click the Tiger to display the Image</p> 

<div id="images" > 
</div> 

<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" /> 
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" /> 

</body> 
</html>

Fuente

2014-02-15 12:34:29 Arun

¿Cómo agrego un evento .click() a una imagen?

Respuesta

Cuestiones relacionadas