Comment mettre des images qui s'aggrandissent
Résolu
Isish
-
monkey_monk Messages postés 641 Date d'inscription Statut Membre Dernière intervention -
monkey_monk Messages postés 641 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
A voir également:
- Comment mettre des images qui s'aggrandissent
- Des images - Guide
- Ia qui crée des images - Accueil - Intelligence artificielle
- Extraire images pdf - Guide
- Comment mettre une image en filigrane sur word - Guide
- Recherche images - 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
