Aperçu image sur texte

Aperçu image sur texte - HTML/CSS - Programmation

Marsh Posté le 12-11-2008 à 11:13:32    

Bonjour je voudrais savoir si c'est possible de faire en html:
-Quand on passe la souris sur du texte d'afficher une image(comme un genre d'aperçu)
Merci d'avance

Reply

Marsh Posté le 12-11-2008 à 11:13:32   

Reply

Marsh Posté le 12-11-2008 à 13:22:34    

Je ne crois pas qu'un texte ordinaire puisse gérer le passage de la souris. Mais par contre les liens le peuvent. Donc une solution consisterait à utiliser le onMouseOver d'un lien dont le libellé serait un texte

<a href="#" onMouseOver=afffiche_image();>une ligne de texte</a>

Il serait aussi possible que ce texte/lien ne soit pas souligné en changeant la "décoration" au niveau du CSS.
 
Edit : La solution ci-dessous de sedonbus est mieux.

Message cité 1 fois
Message édité par olivthill le 12-11-2008 à 15:30:21
Reply

Marsh Posté le 12-11-2008 à 14:15:04    

C'est du javascript non?

Reply

Marsh Posté le 12-11-2008 à 14:37:37    

olivthill a écrit :

Je ne crois pas qu'un texte ordinaire puisse gérer le passage de la souris. Mais par contre les liens le peuvent. Donc une solution consisterait à utiliser le onMouseOver d'un lien dont le libellé serait un texte

<a href="#" onMouseOver=afffiche_image();>une ligne de texte</a>

Il serait aussi possible que ce texte/lien ne soit pas souligné en changeant la "décoration" au niveau du CSS.


Suffit de mettre un span, cette balise est justement crée pour la mise en forme de texte en ligne ,pourquoi utiliser un <a>   :??:

 

<span onmouseover="afffiche_image();">une ligne de texte</span>

 

Et onMouseOver est pas valide xhtml, ça va te générer une erreur (faut le mettre en minuscule), mais on s'écarte du sujet.

 

Apres faut creer la fonction qui va afficher une popup ou l'image directement dans une zone de ta page.

 



Message édité par Alisteroid le 12-11-2008 à 17:05:15
Reply

Marsh Posté le 12-11-2008 à 16:47:41    

Merci quand meme ;mais j'ai trouver avec le css grace a ca:
 
Css:
a.info {
  position:relative;
}
a.info:hover {
   background: none;  
   z-index: 500;  
}
a.info span {display: none;}
a.info:hover span {
   display: inline;  
   position: absolute;
   white-space: nowrap;
   font-size:10px;
   font-weight:normal;
   width:150px;
   top: 10px;  
   left: 50px;
   background: white;
   padding: 3px;
   border: 1px solid #5D779A;
   border-top: 4px solid #5D779A;
}
 
Html:
<a href="#" class="info">Pop-up sans Javascript<span>Le contenu indexable de l'info-bulle</span></a>  
 
J'ai trouver ça la dessus:
http://www.pixtiz.com/fr/blog/web/ [...] urvol.php#

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed