Discussion :

[SALISTASE]

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

[madevilts]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[SpaceFrog]

oui ou en plus concis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[le_chomeur]

met un id sur ton image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

sur tes checkBox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et coté javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
function changeImg(imageAmettre){
document.getElementById('test').src = imageAmettre
}

EDIT : hups j'arrive a la bourre lol

[SALISTASE]

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

[SALISTASE]

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

[SpaceFrog]

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

[SALISTASE]

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

[le_chomeur]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

Ce qui donnerait dasn ton cas:

dans le head:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SALISTASE]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

un quote en trop à la fin ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[le_chomeur]

un pti lol

[madevilts]

un pti lol

j'ai pas osé

[SALISTASE]

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

[SpaceFrog]

tu es sûr du chemin ?

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

[le_chomeur]

es tu certains du chemin de ton images ?

[Jumano]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

Ben non

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

[SALISTASE]

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