Discussion :

[lothep]

Bonjour,

Je bloque sur la conception d'un rollover. J'aimerais qu'un texte différent, toujours sur le meme emplacement, s'affiche lors du passage de la souris.

Je m'explique. Voici la structure :

[blocTXT]
[lien1] [lien2] [lien3] [lien4]

J'ai un menu de 4 liens, avec sur chaque un rollover d'image. Jusqu'à là rien de complexe et ca marche.
J'aimerai en plus créer un second rollover qui au passage de la souris sur un des 4 liens change le texte affiché à l'emplacement BlocTXT. Donc 4 possibilité de texte, mais toujours au meme endroit.


Résumé du code HTML et CSS en place :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div id="lien1"><a href="http://www.monsite.fr/article1.htm"></a></div>
........
..............
#lien1 a {
width:100px;
height:50px;
float:left;
background: url(../images/picA.gif);
}
#lien1 a:hover {
background: url(../images/picB.gif);
}

MERCI A VOUS

[tsunamichups]

tu peu creer en plus des 4 liens , 4 div contenu dans les div mere <div id="lienx">

au survole de la zone lienx tu affiche le div text-lienx cacher en fonction du bon lien et tu le positionne avec un position absolute

exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="lien1">
<a href="">lien 1</a>
 
<div id="text-lien1" style="display:none;">text 1</div>
</div>
 
 
<div id="lien2">
<a href="">lien 2</a>
 
<div id="text-lien2" style="display:none;">text 2</div>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
 
div#lien1:hover div#text-lien1
{
display : block;
}
 
div#lien2:hover div#text-lien2
{
display : block;
}

ensuite tu les positionne a ta guise avec comme je l'ai dit position : absolute; et des margin pour le positionner en fonction de ton lien et pas en fonction du coin en haut a gauche de ton navigateur avec top et left