Discussion :

[Gregoriz]

Bien le bonjour,

Je viens vous demander de l'aide pour éluder un problème.

Ce que je veux faire est la chose suivante :

Je veux mettre une image mappée. Chaque partie de l'image sera un lien. Jusque là, il n'y a absolument aucun problème et je sais m'y prendre.
Là où je bloque c'est pour afficher un text au survol. Je ne parle pas d'un text tout bête de description, comme le permet l'attribut alt. Je veux en fait faire apparaitre un cadre descriptif de la section située derrière le lien. Ce cadre dois avoir une postion précise sur la page, de telle manière à ce qu'il ne recouvre pas l'image mappée en question.

Je voulais donc savoir comment m'y prendre. Je voulais au début utiliser des blocs de texte qui apparaitra au survol. Le problème, c'est que je n'ai trouvé aucun moyen de faire apparaitre quelque chose au survol d'un lien d'image mappée. De plus, les tutos que j'ai trouvé sur le net pour utiliser des affichages au survol de liens n'expliquent que comment faire apparaitre des images en arrière plan.

Voilà, j'espère avoir été assez clair. Je ne veux pas d'une solution toute donnée, ce que j'attend c'est surtout de pouvoir être aiguillé vers un tuto qui expliquerait comment positionner mon cadre, et le faire apparaitre au survol du lien, ou simplement que l'on me donne le principe de fonctionnement.

Merci bien

[Damouille]

Bonjour,
En css, c'est le :hover qui sert à faire ca.

Code :

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

<a><img /><span>Le texte caché</span></a>

Code :

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

1
2
3
4
5
6
7
a span {
display: none; /* -- Les span contenus dans des a sont cachés-- */
position: absolute;
}
a:hover span {
display: block; /* -- Les span sont affichés au survol du a -- */
}

Par contre IE6 ne comprend pas ca. Il cachera le span en permanance.

[c_s_s]

Bonjour,

Si tu utilises un mapping HTML, il y a moyen de déclencher une action javascript lorsque la souris survole une zone AREA.

Tu peux ajouter sur ces zones des événements onmouseover et onmouseout qui modifieront le style de ton cadre descriptif pour l'afficher (display:block) ou le masquer (display:none).

Je ne veux pas rentrer trop dans le détail puisque tu ne souhaites pas une solution toute faite, mais si mes explications ne sont pas assez claires, je peux apporter des précisions.

[Gregoriz]

http://r-hunel.developpez.com/tutoriels/css/info-bulle/

J'avais pas vu ce tuto, et il devrait pouvoir m'aider à faire ce que je désire faire (enfin j'espère xD).

Cependant, il ne répond pas a ma question de positionnement. J'ai vu dans la page qu'il positionnait l'info-bulle, mais, il l'a positionne par rapport a quoi ? Le coin supérieur gauche de la page, ou bien par rapport au lien (ce qui m'arrangerait XD).

@ CSS :

Pour ce qui est de Javascript, je n'ai jamais utilisé. J'ai l'intention de m'y mettre un jours, mais je ne pensais pas que j'en aurais besoin pour ce site en question ^^. Je fouillerais sur le net pour essayer d'avoir plus de précisions sur ce point.

Merci bien :p

EDIT: Mon vrai problème en fait, c'est qu'il n'y a pas de balise "a" en mapping. Je voulais savoir donc, a quelle balise il faut associer les attributs permettant l'affichage du commentaire pendant le survol de la souris au dessus de la zone mappée , <map>, <area> ? Une autre peut-être... Enfin je sèche la :/

[canary]

moi voici comment je fais dans la page CSS :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
/* INFOBULLES du MENU */
a.tooltip em {display:none;}
 
a.tooltip:hover {
    border:0;
    position:relative;
    text-decoration:none;
    text-align:left;
}
 
a.tooltip:hover em {
    font-style:normal;
    display:block;
    position:relative;
    top:65px;
    left:-20px;
    padding:5px;
    color:#000;
    border:1px solid #bbb;
    background:#ffc;
    width:170px;
}
 
a.tooltip:hover em span {
    position: absolute;
    top:-7px;
    left:15px;
    height:7px;
    width:11px;
    margin:0;
    padding:0;
    border:0;
}

Et dans ta page HTML tu tappes une ligne comme ceci :

Code :

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

 <a class="tooltip" href="#"><em>TON TEXTE</em></a>

Aud-

[Gregoriz]

Canary, ta réponse ne correspond pas à ce que je veux faire : le texte n'est pas un liens.

J'ai tout de même réussis à atteindre le résultat que je voulais (même si je n'ai définit la position des infobulles, je voulais juste comprend le fonctionnement).

Je me suis mis dans les tutos Javascript, et ça reste encore le meilleur moyen d'arriver à l'affichage d'infobulle au survol d'une zone d'une image mappée.

Mon code n'étant pas propre du tout (ça reste un véritable brouillon) je donne le schéma général pour ceux que ça pourrait interresser.

Code :

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

1
2
3
4
5
6
7
8
9
<div>	
		<img src="anthropocentrisme.jpg" USEMAP="#menumap" border=0 height=547 widht=397>
		<div id="infobulle" style="position:absolute;top:10px;left:10px;display:none">Le texte à chacher
		</div>
</div>
			<map name="menumap">
				<area shape="rect" coords="48,107,92,138"  href="lienaupif.php" onMouseOver="javascript: getElementById('infobulle').style.display='block';return false" onMouseOut="javascript: getElementById('infobulle').style.display='none';return false">
				<area shape="rect" coords="48,139,92,179" href="lienaupif.php" onMouseOver="javascript: getElementById('infobulle').style.display='block';return false" onMouseOut="javascript: getElementById('infobulle').style.display='none';return false">
			</map>

Il est biensur évident que certains trucs doivent être inutiles (enfin je crois). C'est donc à prendre avec des pincettes, et vaut mieux éviter un simple copier/coller xD.

[Bovino]

Il est biensur évident que certains trucs doivent être inutiles

oui, tu peux supprimer les "javascript:" sur les événements car ceux-ci attendent effectivement du code javascript, ensuite, les return false sont aussi inutiles et les attributs xhtml étant en minuscule, il est préférable de ne pas mettre de de nom d'événement 'camelized'.

Code html :

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

1
2
3
4
5
6
7
8
9
<div>	
		<img src="anthropocentrisme.jpg" usemap="#menumap" border=0 height=547 widht=397>
		<div id="infobulle" style="position:absolute;top:10px;left:10px;display:none">Le texte à chacher
		</div>
</div>
			<map name="menumap">
				<area shape="rect" coords="48,107,92,138"  href="lienaupif.php" onmouseover="document.getElementById('infobulle').style.display='block';" onmouseout="document.getElementById('infobulle').style.display='none';">
				<area shape="rect" coords="48,139,92,179" href="lienaupif.php" onmouseover="document.getElementById('infobulle').style.display='block';" onmouseout="document.getElementById('infobulle').style.display='none';">
			</map>

aux erreurs d'inattention près...