Discussion :

[imarkoh]

Bonjour,

J'espère que vous pourrez m'aider à y voir plus clair car je suis débutant en javascript.
J'ai une palette de différentes couleurs sur la droite de ma page (les pastilles de couleurs sont des images qui chargent une pastille de couleur plus foncée lorsque l'internaute la survole avec la souris).


J'ai réussi à faire l'effet de survol sur les pastilles et le clic :

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
<script language="JavaScript">
if (document.images){
var phone_noir = new Image(); phone_noir.src = "phone_color/phone_noir_reflet.gif"
var pastille_bleu = new Image(); pastille_bleu.src = "phone_color/pastille_bleu.png"
var pastille_bleu2 = new Image(); pastille_bleu2.src = "phone_color/pastille_bleu2.png"
var phone_bleu = new Image(); phone_bleu.src = "phone_color/phone_bleu_reflet.gif"
var pastille_rouge = new Image(); pastille_rouge.src = "phone_color/pastille_rouge.png"
var pastille_rouge2 = new Image(); pastille_rouge2.src = "phone_color/pastille_rouge2.png"
var phone_rouge = new Image(); phone_rouge.src = "phone_color/phone_rouge_reflet.gif"
}
 
function change(nom,obj_im) { 
       if (document.images) {
		   document.images[nom].src=obj_im.src}
    }
</script>
 
...
 
<a href="javascript:;" onmouseover="change('bleu',pastille_bleu2);change('phone',phone_bleu);" onmouseout="change('bleu',pastille_bleu);change('phone',phone_noir);" onclick="change('bleu',pastille_bleu2);pastille_bleu.src=pastille_bleu2.src;change('phone',phone_bleu);phone_noir.src=phone_bleu.src" ><img src="phone_color/pastille_bleu.png" alt="Phone bleu" width="40" height="40" id="Pastille bleue" name="bleu" /></a>

Mais ce que je n'arrive pas à faire, c'est la gestion correcte de l'événement click de la souris.
J'aimerais que lorsqu'on clique sur une pastille, celle-ci reste figée (la deuxième image de la pastille plus foncée est chargée), qu'on reste sur la même page, que cela fige en même temps la couleur de l'image "phone" à gauche, affiche un texte dans un div, affiche le bouton suivant (qui est caché à la base sous la palette, avec style="visibility:hidden"), et que cet état (quelle pastille a été cliquée) soit récupérable pour la suite (par du PHP, pour servir pour la page suivante).

Comment je peux faire ça le plus simplement du monde ?

Merci beaucoup pour votre aide

[NoSmoking]

Bonjour,
commences peut être par éclaircir ton code, en créant des fonctions plutôt que de mettre du code javascript inline, souvent la solution apparaît plus clairement.

Tu peux également gérer tes rollovers via le CSS, et en jouant avec les class on arrive à faire des choses sympa.

PS:
au fait <script language="JavaScript">est obsoléte autant passer à <script type="text/javascript">, voire <script> tout court en HTML5.