Comment mettre des images qui s'aggrandissent
Résolu
Isish
-
monkey_monk Messages postés 611 Date d'inscription Statut Membre Dernière intervention -
monkey_monk Messages postés 611 Date d'inscription Statut Membre Dernière intervention -
Hello,
Je créé actuellement un site internet disponible en plusieurs langues. Pour ce faire, j'ai crée une page d'accueil qui propose de choisir la langue. J'aimerai que lorsqu'on passe le curseur sur l'image (chaque langue à son image) celle-ci se mette en taille réelle.(Car je l'ai redimentionnée.)
Merci d'avance
Je créé actuellement un site internet disponible en plusieurs langues. Pour ce faire, j'ai crée une page d'accueil qui propose de choisir la langue. J'aimerai que lorsqu'on passe le curseur sur l'image (chaque langue à son image) celle-ci se mette en taille réelle.(Car je l'ai redimentionnée.)
Merci d'avance
Configuration: Windows XP Opera 9.80
A voir également:
- Comment mettre des images qui s'aggrandissent
- Des images - Guide
- Ia qui génére des images - Accueil - Intelligence artificielle
- Recherche des images - Guide
- Comment mettre une image en filigrane sur word - Guide
- Comment légender une image - Guide
4 réponses
Tu peux faire ça via le css... avec la pseudo classe :hover.
Ex.:
dans ton css:
Et ça devrais fonctionner !
Au pire, si je me goure avec le passage "a:hover img" tu peux mettre l'image dans le fond du a et placer un texte (ce qui est mieux pour le SEO !)
Ex.:
dans ton css :
Voilà j'espère ne pas avoir fait de fautes ! :D
Ex.:
<a class="roll" href="#" title="Français"><img src="ton_image.gif" alt="Français" /></a>
dans ton css:
a.roll:link img, a.roll:visited img { display:block; width:100px; height:100px; border:0; }
a.roll:hover img, a.roll:active img { display:block; width:200px; height:200px; }
Et ça devrais fonctionner !
Au pire, si je me goure avec le passage "a:hover img" tu peux mettre l'image dans le fond du a et placer un texte (ce qui est mieux pour le SEO !)
Ex.:
<a class="roll" href="#" title="Français">Français</a>
dans ton css :
a.roll:link, a.roll:visited { display:block; width:100px; height:100px; background:url(ton_image.gif) 0 0 no-repeat; text-indent:-9999px; }
a.roll:hover, a.roll:active { display:block; width:200px; height:200px; background:url(ton_image_en_grand.gif) 0 0 no-repeat; text-indent:-9999px; }
Voilà j'espère ne pas avoir fait de fautes ! :D
