Comment faire apparaitre une image en passant la souris sur un mot

Publié le par PêUR

Suite à la question de Sandra  sur cet article (Commentaire N°14), voici une méthode en CSS pour faire apparaître une image en pasant votre souris sur un mot. Cette méthode est adaptée de l'article Infobulle (Popup) en CSS.

 

Exemple

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dignissim eros Survolez-moi nisl. Cras et tortor sed nisl auctor placerat. Morbi et quam id neque blandit pellentesque. Ut nisi ipsum, pretium ac, pretium a, pulvinar adipiscing, nisi. Nulla facilisi. Donec vehicula tellus sed enim. Morbi consequat, augue sed vulputate adipiscing, velit risus vestibulum odio, quis adipiscing

En plaçant le curseur de votre souris sur le mot souligné en pointillé vous verrez apparaître une image.

Comment faire

Pour obtenir ce résultat vous devez procéder en 2 ètapes:

  • La première, vous devez ajouter dans votre CSS (au niveau des éléments principaux) le code suivant:

CSS

a.viewpic {
  position:relative;
  border-bottom:1px dashed #808080;
  text-decoration: none;
}
a:hover.viewpic {
  text-decoration: none;
  background: none;
}
a.viewpic span {display: none;}

a:hover.viewpic span {
  display: inline;
  position: absolute; 
  top: -20px;
  left: 10px;
  z-index: 20;
  width:100%;
  padding:2px 4px;
}

  • La deuxième, dans vos articles, chaque fois que vous voulez insérer une image comme cell-ci au survol d'un mot ou d'une expression, il suffit de mettre le code suivant en mode source:

HTML

<a class="viewpic" href="#">Survolez-moi<span><img src="url_image.jpg" alt="" /></span></a>

Pour aller plus loin

Si vous voulez modifier la position de l'image, dans le CSS, modifiez les valeurs des propriétés top et left.

 

Publié dans CSS

Commenter cet article

soy 20/06/2007 02:19

bonjour a tous.
je viens de voir le code de peur. vraiment génial. bravo .
mais peux ton entrer ce genre de code sur des blogs du style de myspace par exemple ???

soy

PêUR 20/06/2007 18:28

Si tu as accès au html, au css et que le javascript n'est pas bridé, tu peux aisément utiliser ces astuces ;)

died 18/06/2007 06:27

super, merci pour toutes cé info c'est génial cela ma servi de montrer à mes visiteurs et abonnés de mon blog l'arriver de mon forum

PêUR 18/06/2007 09:20

:)

vanda 13/06/2007 13:39

j'ai fait un essai ça marche super, très bon tutoriel !
un jour j'aimerai pouvoir apprendre à faire ça mais avec une image...remplacer une image par une autre au survol....On peut transformer ce code en mettant ?
je me pose la question...

Yajoweb 12/06/2007 23:28

Vraiment top les explications. Heureusement qu'il y a des doués ! Justement une question de la part d'un amateur : est-ce qu'il y a un moyen pour forcer l'image de s'afficher dans un endroit précis de la page et qui disparaît avec le scrollng? En effet, j'ai une liste de texte avec des images liées, mais si je scroll éa liste, je ne vois plus l'image. De plus cette page est utilier dans una autre en Iframe.

PêUR 13/06/2007 13:08

Je ne comprend pas le "qui disparaît avec le scrolling"

Yogi 29/05/2007 13:41

C'est encore moi...
Et pour faire l'inverse ?
CAD survoler des images pour faire appraitre un texte au milieu qui change en fonction de l'image?
liens temporaire : www.dreamflat-baschablais/tempo.html

PêUR 30/05/2007 16:57

Infobulle en css (2) - CSS tooltips