Image qui change au survol
Fermé
anto59190
Messages postés
82
Date d'inscription
mardi 17 juin 2014
Statut
Membre
Dernière intervention
19 avril 2022
-
14 janv. 2018 à 20:53
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 - 26 janv. 2018 à 22:42
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 - 26 janv. 2018 à 22:42
A voir également:
- Image qui change au survol
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image - Guide
2 réponses
Anacleto7
Messages postés
20
Date d'inscription
lundi 18 janvier 2016
Statut
Membre
Dernière intervention
25 janvier 2018
3
25 janv. 2018 à 22:35
25 janv. 2018 à 22:35
On me souffle qu'en 1 strict tu dois mettre un background-image:url(images/tonimage.jpg)
telliak
Messages postés
3655
Date d'inscription
mercredi 20 septembre 2006
Statut
Membre
Dernière intervention
27 mars 2024
875
26 janv. 2018 à 22:42
26 janv. 2018 à 22:42
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>
25 janv. 2018 à 23:10
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