Come si aggiunge un evento .click() a un'immagine?

Ho uno script che posiziona un'immagine basata su un clic del mouse grazie a Jose Faeti. Ora ho bisogno di aiuto per aggiungere un evento .click() al codice qui sotto in modo che quando un utente fa clic sull'immagine esegue la funzione mostrata nello script.Come si aggiunge un evento .click() a un'immagine?

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

Ho messo l'intero codice qui sotto, nel caso in cui si voglia vederlo.

<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>

Aiuto?

fonte

2011-09-10 SS'

Qual è il motivo che non sei solo utilizzando jQuery? In ogni caso, stai creando un elemento DOM per l'immagine: aggiungere un listener equivale ad aggiungere un listener a qualsiasi altro elemento DOM, che sai già come fare. –

Prima di tutto, questa linea

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

Stai mescolando HTML e JavaScript. Non funziona così. Sbarazzati del .click() lì.

Se si legge il codice JavaScript che si trova lì, document.getElementById('foo') si sta cercando un elemento HTML con un ID di foo. Non ne hai uno. Lascia la tua immagine che ID:

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

In alternativa, si potrebbe gettare il JS in una funzione e porre onclick nel codice HTML:

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

vi consiglio di fare qualche lettura su JavaScript e HTML anche se .

Gli altri sono di destra circa la necessità di spostare il <img> sopra il legame troppo JS clic.

fonte

2011-09-10 20:49:35 mpen

Non è possibile associare un evento per l'elemento prima esiste, così si dovrebbe fare in 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>

fonte

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>

fonte

2014-02-15 12:34:29 Arun

Come si aggiunge un evento .click() a un'immagine?

risposta

Problemi correlati