Discussion :

[Sacra]

Bonjour à tous,

Je viens ici trouver votre aide car mon cerveau commence à fumer.
J'ai créé une page HTML via Photoshop qui découpe mon PSD pour placer des JPEG dans un tableau.
J'ai créé un rollover sur mon menu, au départ en css, maintenant avec les onMouse (tant pis pour le W3C).
Jusque là tout fonctionne.
La difficulté supplémentaire est que j'aimerai qu'une autre image de mon tableau change au survol d'un des boutons du menu. En css si possible mais toute solution est bonne à prendre.

J'avais pensé à quelque chose comme...

Code :

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

1
2
3
4
5
6
7
td.class1{
background-image:url...;
}
 
td.class1, a.class2:hover{
background-image:url...;
}

...mais ça ne fonctionne pas.
J'ai essayer avec les onMouse et c'est encore pire.
Avez-vous une idée voire une solution ?
Merci d'avance de vous pencher sur mon problème.

[bengrum]

passe par les onmouse.

pour la deuxième case de ton tableau tu lui met une class css lui appliquant une image en background. via le onmouseover, tu changes la classe de cette case et dans ton css tu met une autre image en background pour cette nouvelle classe. il suffit d'avoir un onmouseout qui remet la classe initiale pour avoir l'effet de survol.

[devyan]

Bonjour à tous,

Je viens ici trouver votre aide car mon cerveau commence à fumer.
J'ai créé une page HTML via Photoshop qui découpe mon PSD pour placer des JPEG dans un tableau.
J'ai créé un rollover sur mon menu, au départ en css, maintenant avec les onMouse (tant pis pour le W3C).
Jusque là tout fonctionne.
La difficulté supplémentaire est que j'aimerai qu'une autre image de mon tableau change au survol d'un des boutons du menu. En css si possible mais toute solution est bonne à prendre.

J'avais pensé à quelque chose comme...


...mais ça ne fonctionne pas.
J'ai essayer avec les onMouse et c'est encore pire.
Avez-vous une idée voire une solution ?
Merci d'avance de vous pencher sur mon problème.

Bonjour,

Il y a un petit problème dans la déclaration CSS que tu donnes en exemple...

Je suppose (par manque de support html) que td.class1 contient un lien a.class2

Donc pour ton exemple CSS il faut enlever la virgule entre td.class1 et a.class2 dans la seconde déclaration.

Dans ce que tu fournis tu dis :
1/ je mets une image de fond dans td.class1
2/ je mets une (autre) image de fond dans td.class1 ET par la même occasion cette image est aussi utilisée comme fond pour a.class2

Alors que je pense que tu voulais :
1/ je mets une image de fond dans td.class1
2/ je mets une (autre) image de fond lorsque je survole a.class2

[Sacra]

Non ce n'est pas ça.
Voici mon code html:

Code html :

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

1
2
3
4
5
6
7
8
9
...
<td colspan="2" id="ecran">
<img id="ecran" src="images/Index_05.gif" width="329" height="94" alt=""></td>
...
<td colspan="2" rowspan="2">
<a class="formation" href="index.php?page=formation" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('form','','images/rollover/form18.jpg',1)">
<img src="images/Index_18.jpg" name="form" width="65" height="46" border="0"></a>
</td>
...

et mon CSS

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
td.ecran, a.formation:hover{
background-image:url(images/rollover/contact.gif);
background-repeat:no-repeat;
border:none;
}
td.ecran{
background-image:url(images/Index_05.gif);
background-repeat:no-repeat;
border:none;
}

Donc pour résumer,
- mon "a.formation" subit un rollover grâce au onMouse (fonctionnel)
- je souhaite que mon "td.ecran" change de background au survol de "a.formation"

Le survol ne se fait pas dans la même case que le changement d'image...
la virgule en CSS symbolise le "et" je crois. Il me faudrait un "si" à la place...

Une autre idée ??

[devyan]

Bonjour,

1/ Ton code CSS équivaut à ceci :

Code :

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
 
a.formation:hover{
background-image:url(images/rollover/contact.gif);
background-repeat:no-repeat;
border:none;
}
 
td.ecran{
background-image:url(images/rollover/contact.gif);
background-repeat:no-repeat;
border:none;
}
 
td.ecran{
background-image:url(images/Index_05.gif);
background-repeat:no-repeat;
border:none;
}

J'ai placé la déclaration "a.formation:hover" avant celle de "td.ecran" exprès pour mettre en évidence que l'ordre sur la ligne "td.ecran, a.formation:hover" n'a pas d"incidence ni de lien hiérarchique.

2/ Les 2 éléments "td.ecran" et "a.formation" n'ayant pas de lien hiérarchique direct cela me semble difficile de faire ce que tu veux par CSS
Il faudrait donc ajouter dans les fonctions script de ton rollover existant la gestion du "td.ecran" correspondant. (le html fournis ne permettant pas de savoir si les 2 "td" sont dans le même "tr" ou même la même "table" il m'est impossible de préciser plus ma réponse )

[Sacra]

Bonjour Devyan et merci pour ta réponse.
Les deux td sont dans des tr différents mais dans le même tableau.

Code css :

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

1
2
3
4
5
a.formation:hover{
background-image:url(images/rollover/contact.gif);
background-repeat:no-repeat;
border:none;
}

Cet ordre permet de modifier l'image encadrée par ma balise <a></a>.
Or, ce n'est pas ce que je recherche. Cette dite image étant déjà soumise à un rollover en JS via les onMouse.
Je vais essayer de voir si je peux inclure le second rollover dans ma fonction JS existante... Sachant que cette fonction est générée par DreamWaver. Pour moi le JS c'est loin !!
Je vous tiens au courant.
Encore merci

[Bovino]

Hum, tu déclares td.ecran en CSS, mais dans ton HTML, ecran est un id...

EDIT :

la virgule en CSS symbolise le "et" je crois. Il me faudrait un "si" à la place...

Pour être précis, la virgule en CSS est un délimiteur pour séparer les différents éléments auxquels tu appliques la classe.
Donc dans ton exemple et après avoir lu un peu plus (), la seule manière de faire un rollover qui impactera un autre élément est via JavaScript et mouseover / mouseout.