Infobulle avec image

Réalisation: assez facile
Connaissance: un peu de CSS et de html

Object: Afficher une image (et du texte) au passage de la souris sur un lien sans passer par un javascript mais simplement avec des classes spécifiques dans la feuille de style et des balises appropriées dans le corps de texte.

• Avantage: bien plus léger qu'un javascript et fonctionne même si celui ci est désactivé
• Inconvénient: codage html en manuel

Exemple 1: Liens en ligne (avec boutons)
Lien-1Image 1
      Lien-2Image 2
      Lien-3Image 3
Vous voulez construire un site pour:
Présenter vos passions
Documenter un logiciel que vous utilisez
Partager vos photos
Parler de vous ou communiquer avec autrui ?
      Lien-4 image 4


Exemple 2: Liens dans du texte (liens surlignés)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, Lien-1Image 1
facilisis vitae, nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum Lien-2Image 2
, est ut placerat elementum, lectus  Lien-3Image 3
Vous voulez construire un site pour:
Présenter vos passions
Documenter un logiciel que vous utilisez
partager vos photos
Parler de vous ou communiquer avec autrui ?
nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse Lien-4image 4
lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.

Réalisation

Ouvrez votre feuille de style et insérez les classes suivantes

/* infobulle image */
a.imag {
background-color : #ffff80; /* Couleur de fond du lien */
position: relative; /* necessaire sur certaines skins pour repositionner l'image dans la grille */
}
a.imag:hover {
border-bottom: 0px; /* indispensable pour IE */
cursor : help; /* Type de curseur  au passage de la souris*/
}
a.imag span {
display:none ; /* cache les <span> placés dans le lien <a> */
text-decoration:none ; /* soulignement du lien */
color: #000000; /* Couleur du texte associé a l'image */
background-color : #ffffff; /* Couleur du fond de l'info bulle  */
}
 a.imag:hover span {
display: block; /* Montre le texte et l'image lors du passage du pointeur */
position: absolute; /* position  de l'image dans une zone de l'écran par rapport au lien */
top: 20px; /* cette zone se situe à xxx pixels du haut du lien */
left: 5px ; /* cette zone se situe à xxx pixels de la gauche du lien */
border:solid 1px; /* Style de bordure de l'image */
padding: 4px; /* Marge intérieure à la bordure */
text-align:center; /* Centrage du texte associé à  l'image */
z-index: 50; /*nécessaire avec certaines skins pour positionner l'image par rapport au fond */
}
/*fin infobulle image */

Comment faire apparaitre l'info-bulle avec l'image et le texte associé ?

Ecrivez normalement votre texte dans votre article ou votre éditorial, puis passez en mode source, repérez le mot (ou la phrase) sur lequel vous souhaitez positionner l'info-bulle et écrivez alors le codage suivant (on suppose que votre image est dans le répertoire img)


[a href="#" class="imag"]Lien-1[span]Texte image [br /][img alt="image.ext" src="http://www.votresite.ltd/img/image.ext" /][/span][/a]

Ex: Lien-1Texte image

Bien entendu, il est possible d'appliquer les balises html au texte de l'info-bulle

Nota: pour éviter l'interprétation du code, les balises < et > ont été remplacées par [ et ]

Les commentaires /* bla bla bla */  sont la pour vous aider dans les réglages de l'infobulle et peuvent être supprimés


La base de ce script a été trouvé je ne sais plus ou et entre autre sur mammouthland.net ...

Tests:
Firefox 2.0.0.11 --> ok
IE 6.0.0 --> ok
Opera 9.25 --> Ne fonctionne pas de façon vraiment satisfaisante ...