Image qui change au survol
anto59190
Messages postés
96
Statut
Membre
-
telliak Messages postés 4387 Statut Membre -
telliak Messages postés 4387 Statut Membre -
bonjour,
je cherche a faire comme le titre indique que mon image change au survol avec le souris et/ou change automatiquement au bout de quelque secondes
voici le code actuel en image fixe :
merci a vous
je cherche a faire comme le titre indique que mon image change au survol avec le souris et/ou change automatiquement au bout de quelque secondes
voici le code actuel en image fixe :
<a target="_blank" href="http://www.otakuplayer.fr/tag/anime"> <img style="height: x; width: 161px;" src="http://image.noelshack.com/fichiers/2017/52/5/1514556267-1511558926-sans-titre-3.jpg" >
merci a vous
A voir également:
- Image qui change au survol
- Change dns - Guide
- Image iso - Guide
- Légender une image - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
2 réponses
Salut,
Une solution esthétique en CSS pur, sans JavaScript ni ajout externes, d'après un «vieux» tuto d'AslaCréations. Reste à adapter positions et dimensions et mettre les noms des images à la place d'image_no_1 et image_no_2:
Une solution esthétique en CSS pur, sans JavaScript ni ajout externes, d'après un «vieux» tuto d'AslaCréations. Reste à adapter positions et dimensions et mettre les noms des images à la place d'image_no_1 et image_no_2:
<!-- Code CSS : -->
<style type="text/css">
a.image { /* définition de la classe "image" de la balise <a> */
display: block; /* la balise a doit être en bloc */
height: 441px; /* hauteur de l'image réactive */
width: 722px; /* largeur de l'image réactive */
background-image: url(image_no_1); /* source de l'image de départ */
background-repeat: no-repeat; border: solid 1px;
}
a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(image_no_2); /* source de l'image d'arrivée */
}
#lien { /* "lien" sera notre conteneur, ici la balise div */
position:absolute; /* placement de l'image-lien, à vous d'adapter */
left: 200px; /* dimensions selon l'image, à vous d'adapter */
top: 50px;
width: 722px;
height: 441px;
background: url(image_no_1) top left no-repeat; /* placement de l'image 2 au second plan */
}
#lien a { /* définition du lien qui occupera toute la place du conteneur */
display: block;
width: 100%;
height: 100%;
background: white url(image_no_2) top left no-repeat; /* placement de l'image 1 au premier plan */
color: #000;
}
#lien a:hover { /* masquage de l'image1 au survol */
background: transparent none;
}
</style>
<h3>D'après un «vieil» exemple d'AlsaCréations</h3>
<a class="image" title="Post haec indumentum regale quaerebatur" href="lien.htm">Coucou</a>
un exemple en jquery (il faut évidement appeler la bibliothèque jquery dans la page) et mettre ton code dans un div avec une ID
$(document).ready (fonction(){ $("#id-de-la-div").hover(function() { //truc à faire au hover in $(this).attr("src", "ton-imageHover.jpg") }, function() { //truc à faire au hover out $(this).attr("src", "ton-imageNormale.jpg") }); }}voila