Info Bulles - CSS

Bonjour,

Afin de pouvoir utiliser de manière plus conviviale les info bulles, je ne me sers pas de l'attribut "Title" des balises "a" mais plutot une astuce CSS utilisant les "hover".

Voici ce que je veux faire:
J'ai une image animée (.gif) sur laquelle je souhaite faire des infobulles sur diverses parties.

Sans utiliser les infobulles, j'incluais mon image dans la page de la facon suivante :
<center><img src="mon_image.gif" border="0"></center>;
L'animation tourne en boucle, l'image fait 1,3 Mo. Si l'image n'a pas encore été chargée en mémoire, son affichage est saccadé pendant le premier cyle. Puis tout est fluide.


Désormais, j'utilise une méthode trouvée sur le forum d'alsacréations:

#zone1 
{
	float: left;
	width : 80px;
	height: 153px;
	margin-left: 80px;
	margin-top: 333px;
}

#anim a
{ 
	text-decoration:none; 
} 

#anim_soleil 
{
	width : 500px;
	height: 500px; 
	background: url("mon_image.gif") top left no-repeat;
}
#anim a
{ 
	text-decoration:none; 
} 

#anim a:hover
{
	color:white;
	background: none; 
} 

#anim a span 
{ 
	display:none; 
	width:150px;
	margin-top:50px; 
	margin-left: 25px;
	padding: 2px 5px 2px 5px;
	text-align:justify;
	background-color:#fffcc5;
	color:#1278A9;
	border: 1px solid #ffb515;
} 

#anim a:hover span
{ 
	position: absolute;
	text-align:justify;
	display:inline;
}

et le php:

<div id="anim_soleil"> 
	<a id="zone1" href="?"><span>Texte de l'infobulle</span></a>
</div>

Cela me permet d'afficher en fond mon image, et d'avoir une zone sensible au passage de la souris.

Mais à cela, j'ai deux problèmes:

- Si je ne mets pas de "href" dans la balise <a>, IE, contrairement à firefox, ne m'affiche pas l'infobulle. Cela me pose problème car je ne veux pas mettre d'action au clic. Si vraiment, on est obligé de mettre le href, est il possible de changer le pointeur de la souris pour que l'utilisateur ne voit pas la "main" lui indiquant le clic possible ?

- L'image ne se charge plus comme avant sous IE. Désormais, l'image est chargée en background! Sous Firefox, l'affichage se fait comme avant (saccadé le premier cycle, puis fluide). Sous IE, l'animation GIF n'apparait pas tant que la totalité de l'image n'est pas chargée.

Pour corriger le seconde problème, je me disais que peut etre que je pourrais retirer le background et placer l'image dans la balise <img> comme avant:

<div id="anim_soleil"> 
    <center><img src="mon_image.gif" border="0"></center>;
    <a id="zone1" href="?"><span>Texte de l'infobulle</span></a>
</div> 

Par contre, la zone sensible est alors située en dessous de l'image et non plus dessus comme avant. Je ne sais pas comment corriger ce probleme. J'ai essayé de mettre l'image en float par exemple, mais ca ne corrige pas.

Quelle solution adopter selon vous ?
Merci.
Modifié par lhpp (10 Nov 2006 - 13:10)

lhpp a écrit :
- Si je ne mets pas de "href" dans la balise <a>, IE, contrairement à firefox, ne m'affiche pas l'infobulle. Cela me pose problème car je ne veux pas mettre d'action au clic. Si vraiment, on est obligé de mettre le href, est il possible de changer le pointeur de la souris pour que l'utilisateur ne voit pas la "main" lui indiquant le clic possible ?

Remplace ton : <a id="zone1" href="?">
Par : <a id="zone1" href="#">
Et en ce qui concerne le curseur, il te suffit de rajouter ceci :

#anim_soleil  a {
cursor:pointer;
}

Modifié par Cygnus (10 Nov 2006 - 13:22)

Salut,

Cygnus a écrit :
Remplace ton : <a id="zone1" href="?">
Par : <a id="zone1" href="#">
Et en ce qui concerne le curseur, il te suffit de rajouter ceci :

#anim_soleil  a {
cursor:pointer;
}

Le problème de cette solution est que le lien sera toujours cliquable... Est-ce qu'un lien est vraiment adapté à ce problème ? (oui je sais, IE 6 ne supporte la pseudo-classe hover que sur les liens...)

Pour le curseur, merci pour l'astuce. Pour information, c'est l'option cursor:default; qui permet de laisser la flèche. Le "cursor:pointer;" affiche la main !

Comme le dit Eldebaran, cela ne règle pas vraiment le problème, mais au moins, on évite de mettre sous le nez de l'utilisateur, le fait que le lien est cliquable, mais bon...


A savoir que le principal problème concerne l'affichage de l'image sous IE. Est ce possible d'utiliser la balise <img> pour afficher le gif et placer les zones sensible par dessus ?
Modifié par lhpp (10 Nov 2006 - 14:39)

Salut,

a écrit :
Le problème de cette solution est que le lien sera toujours cliquable... Est-ce qu'un lien est vraiment adapté à ce problème ? (oui je sais, IE 6 ne supporte la pseudo-classe hover que sur les liens...)

Tu peux toujours rajouter l'attribut onclick="return false;"
ce qui aura pour effet d'annuler le lien, si le javascript est activé sur le navigateur du client

mephisto a écrit :
Tu peux toujours rajouter l'attribut onclick="return false;"
ce qui aura pour effet d'annuler le lien, si le javascript est activé sur le navigateur du client

Oui, et ajouter onmouseover="return true;" pour que rien ne s'affiche dans le statut.

Ca fait beaucoup de rustines...

Effectivement, que de rustines pour colmater les bugs IE !!

Et sinon, quelqu'un saurait comment je peux faire avec mon image ?

Bonjour.
Un curseur en forme de point interrrrrogatif me plairait d'avantage (css/ cursor: help;), je pense que celà correspondrait plus à un envoi vers une note de bas de page, comme dans les livres intéressants.
Pour afficher l'image; comme elle n'est pas une balise d'ancrage, il te faudra peut être recourir à tout petit code javascript comparable à celui indiqué pour les menus déroulants qui sont montrés sur Alsacréations.

J'aime pas le javascript héhé !!

Jusqu'a présent, j'ai réussi a m'en passer. J'aimerais autant y couper.