Translation




 

 

 
 
French to English French to German French to Italian French to Spanish
French to Japanese French to Korean French to Russian French to Chinese (Simplified)
 

 

 
 

 

 

 

 

Ombre et lumière

6 janvier 1995 5 06 /01 /janvier /1995 01:00

 

But

    Le but de cette astuce est d'afficher une image sur un mot sans faire un clic de souris. Il suffit de poser le curseur sur le mot ou la phrase.

 

 

Voici deux exemples

 

  Posez votre curseur ici

 

                                                   Ou posez le là

 

 

 

Autre exemple

 

  Cette astuce est utilisée sur ce blog.

 

 

Le code à mettre dans le CSS  (A ne pas mettre dans le  html de votre article) 

 

==> Il suffit simplement de coller ce qui est en gras dans le css de votre blog.

La fonction se nomme : voir-une-image  ---> mais vous pouvez la renommer


a.voir-une-image {
position:relative;
font-size: 11px;   -----Ceci modifie la taille du texte, cela peut être supprimé
font-weight: bold;  ---- Ceci met le texte en gras, cela peut être supprimé
}

 

a.voir-une-image span {display: none;}

a:hover.voir-une-image span {
display: inline;
position: absolute;
top: -20px; ----- Cette valeur correspond au décalage (sur le haut si le chiffre est négatif) de l'image par rapport au début du mot
left:150px; ----- Cette valeur est le décalage (sur la droite si le chiffre est positif) de l'image par rapport au début du mot
z-index: 20;
width:100%; ----- Ceci est la taille de l'image, avec 100% elle s'affichera en entier.
padding:2px 4px;
}

 

 

 

 

Le code html (à mettre dans le  source de votre article)

 

Maintenant que le css est définitivement réalisé, il faut coller ceci dans le html de l'article

 

<a class="voir-une-image" href="votre lien"> Posez votre curseur ici <span><img src="url de l'image" alt="Hooo, c'est beau !" /></span></a>



Limitation
   Aucune. Ce code ne contient pas de Javascript.

 

 

 

 

   

Retour menu Widget 

 

Partager cet article

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article

commentaires

Gadjo 28/12/2012 20:15

Merci pour votre réponse.
Rien ne presse, je vais biaser en utilisant des images de même taille.
En attendant bonnes fêtes de fin d'année.

Le Chevalier Dauphinois 29/12/2012 16:36



Je vous remercie pour votre patience, et je tenterai cette recherche fin janvier j'espère.



gadjo 28/12/2012 10:21

Bien le bonjour
Merci pour ces astuces qui me permettent d'affronter le dragon CSS.
Il me manque quelques armes pour terrasser la bestiole:

1/Est il possible que l'image se positionne centrée quel que soit son format plutôt que relative au mot survolé ?
2/J'ai essayé de modifier la taille de l'image(width) mais cela n'est pas pris en compte .
3/En html le 'alt' ne fonctionne pas non plus.

Le Chevalier Dauphinois 28/12/2012 20:02



* Voila bien longtemps que j'ai utilisé cette astuce. J'avoue ne plus m'en souvenir car depuis, j'ai utilisé pour les articles, quelque chose de plus
simple..... Mais qui n'a pas la même fonction.


* Remarque : Dans mes lignes des css, à l'extrémité droite, j'ai mis un commentaire explicatif.


* Évidemment, il faut le supprimer dans ce css, car il va créer un bug.


* Peut être est ce cela qui empêche le changement de largeur ?


* Si j'ai un peu de temps, je chercherai une solution à votre centrage.


* Mais entre les multiples fêtes, puis la préparation du blog à la migration (qui ne sera pas chose aisée) je crains que mon aide ne soit point rapide.



Muriel 26/11/2011 09:10

Merci, j'adore cet effet-là. Je viens d'en glisser un dans mes pages...

Le Chevalier Dauphinois 26/11/2011 19:42



Tout le plaisir est pour moi si cette astuce plait. Je l'ai trouvée sur un forum d'aide en css et je l'ai un peu modifiée pour le blog du Chercheur.