charger une image au click de la souris

il s'agir de page JSP.
je pense que les chemins sont correctes.
Pour être plus précise je vous mets des bouts de codes qui peuvent être utile pour comprendre ce que je fais.

mon fichier JS est le suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

var img_ext = '.gif'; var img_path = 'D:/test/images/'; preload = new Array(); preload[0]=new Image(); preload[0].src="D:/workspace/test/images/check_on.gif" preload[1]=new Image(); preload[1].src="D:/workspace/test/images/check_off.gif"   function AfficheTexte(message,champ) { if(document.getElementById) document.getElementById(champ).innerHTML = message;}

---

ensuite une partie de ma page jsp avec la partie feuille de style

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<style>     .img_bg_off { width: 55px; height: 55px; background: url(images/check_off.gif); background-repeat: no-repeat; margin-right: 10px; margin-left: 10px; display: inline; float: left; cursor: pointer; } .img_bg_on { width: 55px; height: 55px; background: url(images/check_on.gif); background-repeat: no-repeat; margin-right: 10px; margin-left: 10px; display: inline; float: left; cursor: pointer; } ........................................... <div class="img_bg_on"><div class="img_mobile"><img src="<c:out value='${requestScope.repImages}'/><c:out value='${widget}'/><c:out value='${requestScope.imagesExt}'/>" ></div></div>

---

Pour plus de précisions, j'ai une image de fond check_on ou check_off et je superpose pardessus ces images d'autres images.
c'est à mon mes images check_on et check off que je veux appliquer la fonction de changement

Ceci devrai faire l'affaire: (ca marche pour moi y pas de raison !!)

Dans ton JS:

Code:

---

1 2 3 4 5

function changeimg(nom){ if (document.images) {   document["nom de la balise img"].src = nom;

---

dans ton html

Code:

---

1 2	<img name="nom de la balise img" scr="ton img.gif" onclick="changeimg('ton autre img.gif');" />

---

Il n'y pas d'allocation de memoir pour la seconde image, cela évite defoi un chargement trop long au demarrage de la page.

Sinon il suffi de faire

Code:

---

1 2 3 4 5 6 7 8 9

var img2 = new Image(); img2.src= "image 2.gif";     function changeimg(nom){ if (document.images) {   document["nom de la balise img"].src = nom;

---

dans ton html

Code:

---

1 2	<img name="nom de la balise img" scr="ton img.gif" onclick="changeimg('img2.src');" />

---

Je pense que sur le 2eme code il doit y avoir des erreurs. A voir...

je n'ai pas de balise img, je ne sais pas si t'as vu mon code
je dois appliquer ma fonction de changement ici

Code:

---

<div class="img_bg_on">

---

par quoi dois je remplacer "nom de la balise img" dans document["nom de la balise img"] ???

Essaye de faire comme ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<script language="javascript" type="text/javascript"> function changeImage() { if(document.getElementById('img').className == "img_bg_on") { document.getElementById('img').className = "img_bg_off" ; } else { document.getElementById('img').className = "img_bg_on" ; } } </script> <div id="img" class="img_bg_on" onclick="changeImage();"><div class="img_mobile"><img src="<c:out value='${requestScope.repImages}'/><c:out value='${widget}'/><c:out value='${requestScope.imagesExt}'/>" ></div></div>

---

Ha ben ça change tout !!! Depuis le début on était parti sur des src, docn sur des balises image !!!

donc :

Code:

---

onclick="this.style.backgroundImage=(this.style.backgroundImage=='url(\'check_on.gif\')'?'url('+preload[0].src+')':'url('+preload[1].src+')';

---

si dans ton code tu as la balise <img />

Code:

---

1 2 3 4 5 6

<div class="img_bg_on"> <div class="img_mobile"> <img src="<c:out value='${requestScope.repImages}'/><c:out value='${widget}'/><c:out value='${requestScope.imagesExt}'/>" > </div> </div>

---

Citation:

---

par quoi dois je remplacer "nom de la balise img" dans document["nom de la balise img"] ???

---

C'est du javascript, pour appeler l'élément que tu souhaite, tu fais :

Code:

---

1 2 3 4 5

document.getElementById('nom de la balise img') ou document.'nom de la balise img' ou document.element['nom de la balise img']

---

Pour que sont javascript fonction tu dois donner un nom a ta balise "img". Si tu veux faire une action immédiate sans lien ni bouton tu doit faire du Javascript

:king:

Merci,merci, merci bcp Jumano
ça marche
Merci infiniment

Merci à toutes les personnes qui ont pris la peine de me répondre :D