Problème Info bulle

[olitax]

Bonjour !

Je cherche a mettre sur mon site une info bulle comme ici .

Mais voila ça ne fonctionne pas . Quand j'ouvre ma page , le lien apparait et quand je passe la souri dessus rien ne se passe .

J'ai mes les deux images dans mon dossier "images" et j'ai aussi mis le code dans la css .

Je voudrais savoir d'ou vient le bug .

Voici les deux codes .

a.info {   
	  position:relative; /* Très important */  
	  z-index:10;	
	  color:#000;   
	  font-family:Arial, Helvetica, sans-serif;   
  }   
a.info:hover {   
	  z-index:20;	
  }   
a.info span {   
	  display:none;   
  }   
a.info:hover span { /*la tag SPAN apparaitra avec l’effet hover*/  
	  display:block;   
	  position:absolute;   
	  top:18px;	
	  leftleft:10px;   

	  /*Éléments pour positionner le texte dans la bulle*/  
	  padding-left:25px;   
	  padding-top:24px;	
	  padding-bottom:5px;   
	  padding-right:8px;   
	  width:205px;   
	  height:45px;   
	/* Style du character dans la bulle */  
	  font-family:Arial, Helvetica, sans-serif;   
	  font-weight:normal;   
	  font-style:italic;   
	  font-size:10px;   
	  color:#999999;   
	  text-decoration:none;   
	  text-align:justify;   
  }   
/* Pour avoir un beau background de bulle avec PNG   transparent*/  
  a.info:hover>span {background-image:url(images/bgInfo.png);}   
  a.info:hover span {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bgInfo.png",   
  sizingMethod="crop");}

Merci

A bientot

Olitax

Modifié 17 Août 2007 par captain_torche
Il est préférable d'utiliser la balise CODEBOX pour présenter un code long. J'ai édité ton message en ce sens (captain_torche, modérateur)

[sparh]

Salut olitax,

je viens de recopier ton code et chez moi tout marche très bien, la bulle apparait avec le petit texte (au passage de la souris)!!!

Je vois pas comment t'aider!

Modifié 17 Août 2007 par sparh

[olitax]

A d'accord

Bon alor peut être c'est moi qui procède mal

Tout d'abord j'enregistre les deux images dans mon dossier "images" .

Puis je met ce code dans ma CSS :

a.info {   
	  position:relative; /* Très important */  
	  z-index:10;	
	  color:#000;   
	  font-family:Arial, Helvetica, sans-serif;   
  }   
a.info:hover {   
	  z-index:20;	
  }   
a.info span {   
	  display:none;   
  }   
a.info:hover span { /*la tag SPAN apparaitra avec l’effet hover*/  
	  display:block;   
	  position:absolute;   
	  top:18px;	
	  leftleft:10px;   

	  /*Éléments pour positionner le texte dans la bulle*/  
	  padding-left:25px;   
	  padding-top:24px;	
	  padding-bottom:5px;   
	  padding-right:8px;   
	  width:205px;   
	  height:45px;   
	/* Style du character dans la bulle */  
	  font-family:Arial, Helvetica, sans-serif;   
	  font-weight:normal;   
	  font-style:italic;   
	  font-size:10px;   
	  color:#999999;   
	  text-decoration:none;   
	  text-align:justify;   
  }   
/* Pour avoir un beau background de bulle avec PNG   transparent*/  
  a.info:hover>span {background-image:url(images/bgInfo.png);}   
  a.info:hover span {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bgInfo.png",   
  sizingMethod="crop");}

Ensuite je vais sur ma page index.html , et je met ce code :

<a href="votreDestination" class="info">Lien_1   
<span>La description de votre lien</span></a>

Et quand je fait l'aperçu, le lien fonctionne mais quand je passe sur le lien l'image de l'info bulle ne s'affiche pas il y a juste le texte de ma description .

Olitax

Modifié 17 Août 2007 par captain_torche
cf posts précédents

[sparh]

lol,

et bien c'est exactement ce que j'ai fait!!!

Es tu sur que ton dossier image est bien: "images" (désolé mais à priori je ne vois pas d'autres solution à ton problème)!

Ce n'est pas un problème de CSS car si tu as le texte qui s'affiche au survol c'est que le CSS marche bien.

C'est forcément un problème avec le nom de tes images et/ou le chemin d'accès.

Bon courage te bonne aprèm

[olitax]

Bon domage rien n'y fait Ca ne fonctionne toujour pas .

Merci tout de même Sparh !

[sparh]

de rien mais c'est bizarre ton truc!!

Où es tu hébergé?

As tu fait le test en local?

Tiens voici un lien, tu verras que ça marche!

[olitax]

Oui pareil chez free Bon attend je met en ligne et je te donne le lien .

Voila , alor j'ai tout mis XD Voila le lien http://olitax.free.fr/ l'info bulle qui ne fonctionne pas est en dessous du texte "TEST INFO BULLE >> " (en rouge)

Olitax

Modifié 17 Août 2007 par olitax

[sparh]

Je crois avoir trouvé la source de ton problème:

dans ton CSS:

  a.info:hover>span {background-image:url(images/bgInfo.png);}   
  a.info:hover span {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bgInfo.png",   
  sizingMethod="crop");}

Or ton image n'a pas le même nom: c'est soit bgInfod.png soit bgInfog.png suivant celle que tu veux utiliser!

Voici le code qui devrai marcher:

  a.info:hover>span {background-image:url(images/bgInfog.png);}   
  a.info:hover span {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/bgInfog.png",   
  sizingMethod="crop");}

(j'ai juste corrigé le nom de l'image!)

Au passage:

- protège ton répértoire /images/

- Pourquoi as tu mis des <br />

(

<p><a href="contact.html" class="info">Lien info Bulle test Contact   
<span>La description de votre lien info bulle <br />
<br />
<br />
<br />
</span></a>  </p>

)

Voilà

[olitax]

Youpi ! Ca marche !

Une erreur vraiment idiote

Merci beaucoup Sparh

Olitax