charger une image au click de la souris

Salut,
je cherche à créer une fonction qui me permettra "si on clique sur une image, je coche l'image(ça revient à charger une autre image) si on clique une deuxième fois pour dé-cocher, on recharge la première image.

plus précisément, je dispose de deux images check_on.gif et check_off.giff
si l'image n'est pas cochée et que je clique dessus, je charge check_on
si l'image est cochée et je clique dessus, je charge check_off

est ce que qqn saurait m'aider SVP à créer cette fonction?
Merci d'avance

Code:

---

1 2 3 4 5 6 7 8 9 10 11

<img src="check_on.gif" id="monimage" />   <script> document.getElementById("monimage").onclick = function () { if(this.src=="check_on.gif") this.src="check_off.gif"); else this.src="check_on.gif"); } </script>

---

;)

oui ou en plus concis:

Code:

---

1 2	<img src="check_on.gif" id="monimage" onclick=" this.src=(this.src=='check_on.gif')?'check_off.gif':'check_on.gif';" />

---

met un id sur ton image :

Code:

---

<img src="urldebase" id="test" />

---

sur tes checkBox :

Code:

---

<input type="checkBox" onclick="changeImg('autreImage')" />

---

et coté javascript :

Code:

---

1 2 3 4

function changeImg(imageAmettre){ document.getElementById('test').src = imageAmettre }

---

EDIT : hups j'arrive a la bourre lol

Bonjour,
tout d'abord merci pour ta réponse rapide.
j'ai testé ce que tu m'as proposé mais malheureusement ça ne marche pas.
j'ai mis la fonction dans mon fichier js
ensuite j'ai mis ce bout de code dans ma jsp

<div class="img_bg_off" id="monimage" onclick="fucntion();" >

il y aurait-il une erreur dans ce que j'ai fait??

Désolée pour les autres personnes, je n'avais pas encore vu vos Posts
pour SpaceFrog, j'ai testé ce que tu m'as proposé mais ça ne marche pas non plus:(

si si ça marche ... il faut avoir preloadé les immages c'est tout ...

preloadé???
je ne comprends pas très bien, peux tu être plus précis stp
je ne comprends pas pourquoi il ya un Id de l'image qui ne sera pas utilisé dans le Onclick?

Merci

en gros , pour que ton image s'affiche instantanément elle doit déja avoir été "téléchargée" dnas le navigateur , donc au tout début de ta page tu fais :

Code:

---

1 2	preload = new Image(); preload.src="image.gif";

---

pour chacune des images a télécharger.

ps : a faire en dehors de ta méthode :)

Ce qui donnerait dasn ton cas:

dans le head:

Code:

---

1 2 3 4 5 6 7 8

<script type='text/javascript'> preload = new Array(); preload[0]=new Image(); preload[0].src="image_bg_on.gif" preload[1]=new Image(); preload[1].src="image_bg_off.gif" </script>

---

et dans le body:

Code:

---

1 2	<img src="check_on.gif" id="monimage" onclick=" this.src=(this.src=='image_bg_on.gif')?preload[1].src:preload[0].src';" />

---

ça devient peut être pénible pour vous, mais ça ne marche tjrs pas.
j'ai une erreur "unterminated string lateral" sur cette ligne :

Code:

---

onclick=" this.src=(this.src=='check_on.gif')?preload[1].src:preload[0].src';"

---

un quote en trop à la fin ... :oops:

Code:

---

1 2	onclick=" this.src=(this.src=='check_on.gif')?preload[1].src:preload[0].src';"

---

un pti lol ;)

Citation:

---

Envoyé par le_chomeur

un pti lol ;)

---

j'ai pas osé :D

Bon cette fois ci il n' ya pas d'erreur mais je n'affiche tjrs pas mon image :?

tu es sûr du chemin ?

l'image est dans le même repertoire que la page html ?

es tu certains du chemin de ton images ?

Bonjour,
N'y at-il pas une inversion au niveau des preload :
Remplacer :

Code:

---

1 2	onclick="this.src=(this.src=='check_on.gif')?preload[1].src:preload[0].src;"

---

par :

Code:

---

1 2	onclick="this.src=(this.src=='check_on.gif')?preload[0].src:preload[1].src;"

---

Ben non

Code:

---

preload[0].src="image_bg_on.gif"

---

donc si c'est image_gb_on.gif il faut le remplacer par le off ...
qui est bien preload[1]

pas d'idées pour m'aider ???:(:(:(

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