Image suvolee
gaya_102
-
XanderS2X Messages postés 430 Date d'inscription Statut Membre Dernière intervention -
XanderS2X Messages postés 430 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je voudrais que quand les personnes passe la souris sur l'image la même en grand apparaisse et quand la souris n'est plus sur l'image que la grande image disparaisse. J'ai trouvé comment ouvrir des pop up mais je voudrais pas que les personnes soient obligé de fermer la page. De plus certain navigateur bloque les pop up. Avez vous une solution. Je suis sure que c'est tout bête. lol . Merci d'avance
Je voudrais que quand les personnes passe la souris sur l'image la même en grand apparaisse et quand la souris n'est plus sur l'image que la grande image disparaisse. J'ai trouvé comment ouvrir des pop up mais je voudrais pas que les personnes soient obligé de fermer la page. De plus certain navigateur bloque les pop up. Avez vous une solution. Je suis sure que c'est tout bête. lol . Merci d'avance
A voir également:
- Image suvolee
- Image iso - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
- Image gratuite - Guide
1 réponse
Voici un bout de code javascript qui permet de le faire dans un lien :
Sinon tu peux le faire facilement avec du CSS mais dans ce cas les noms des images sont dans la feuille de style et ne sont plus dans le html.
Tu fais un truc du genre
et dans le html
<a href="#"
onMouseOver="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='image2.jpg';"
onMouseOut ="JavaScript:document.UN_NOM_DE_TON_CHOIX.src='image1.jpg';">
<img name="NOM_DE_TON_CHOIX" src="image1.jpg">
plop
</a>
Sinon tu peux le faire facilement avec du CSS mais dans ce cas les noms des images sont dans la feuille de style et ne sont plus dans le html.
Tu fais un truc du genre
.monimage p {
background-image:url(image1.jpg);
background-position:0 0;
background-repeat: no-repeat;
}
.monimage p :hover {
background-image:url(image2.jpg);
background-position:0 0;
background-repeat: no-repeat;
}
et dans le html
<p class="monimage"></p>
C'est comme une pop-up, mais en plus beau et ça se ferme, ça peut contenir tout ce que vous voulez, et surtout, ça dynamise un brin votre site : le LightBox.
Le LightBox est une "astuce" à base de JavaScript, d'HTML et de CSS, qui permet sur le clic d'une image, d'afficher un cadre sobre, avec un bouton "Close", comme dans une pop-up, sauf que c'en est pas vraiment une.
Tout le reste de votre page sera légèrement noircie en même temps, et la LightBox peut même apparaître progressivement, ce qui met un certain effet sympa à l'œil.
Plus d'infos ici, avec démonstrations en prime !
En revanche elles sont en Anglais, besoin d'aide aussi pour ça ? je peux vous les traduire progressivement.