[CSS] Au survol d’un lien, une image apparaisse
Bonjour,
En CSS, savez-vous comment faire pour qu'au survol d’un lien, une image apparaisse collée au pointeur de la souris ?
J'aurais besoin en VBA aussi ;)
Merci beaucoup...
Bon dimanche :)
Bonjour,
Voici un exemple qui fonctionne :
Code HTML :
<a href="#" class="exemple_lien">Exemple de lien</a>
<img src="https://forum.excel-pratique.com/template/img/logo.png" class="exemple_image" alt="Exemple">Code CSS :
.exemple_image {
position: absolute;
display: none;
z-index: 999;
}
.exemple_lien:hover + .exemple_image {
display: block;
}Code JS (pour déplacer en fonction du curseur), à placer plus bas que le code HTML :
const exempleImage = document.querySelector('.exemple_image');
document.addEventListener('mousemove', e => {
exempleImage.style.left = e.pageX + 10 + 'px';
exempleImage.style.top = e.pageY + 10 + 'px';
});Merci beaucoup Sébastien :)
Mais je n'y connais vraiment rien en code, désolé.
Je ne copie que le code CSS, dans mon widget "Bouton" sur Elementor de Wordpress ?
Mais je mets où l'adresse de mon image ?
Et le code HTML, je peux en faire quoi ?
Encore merci :)
Bonne soirée :)
Je n'utilise pas Wordpress, je ne vais donc malheureusement pas pouvoir t'aider si tu ne comprends pas mon exemple.
Tu devrais peut-être poser la question sur un forum spécialisé pour Wordpress
Pas de souci mais je mets où l'adresse de mon image dans le code CSS ?
Et je fais quoi des 2 blocs HTML ?
mais je mets où l'adresse de mon image dans le code CSS ?
Ici l'image est dans le code HTML juste après le lien.
Et je fais quoi des 2 blocs HTML ?
Le code HTML est un exemple pour te montrer où ajouter l'image par rapport au lien.
Le code JS est à placer par exemple dans le code HTML après le lien et l'image entre les balises <script> (ou plus bas dans la page).
Bonsoir Sébastien,
J'ai essayé ton code mais rien ne se passe.
Mais bon, je n'ai fait que le recopier sans vraiment comprendre car je n'y connais rien :-(
Bonne soirée
Bonsoir @Vodoraix,
En complément de réponse, le fichier HTML complet doit ressembler au code ci-dessous.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#hover-image {
position: absolute;
display: none;
pointer-events: none;
}
</style>
<title>Image au survol du lien</title>
</head>
<body>
<a href="#" class="hover-link">Survolez-moi</a>
<img src="<LIEN VERS UNE IMAGE>" id="hover-image" alt="Hover image"/>
<script>
let image = document.getElementById('hover-image');
let link = document.querySelector('.hover-link');
document.addEventListener('mousemove', function (e) {
image.style.left = e.pageX + 'px';
image.style.top = e.pageY + 'px';
});
link.addEventListener('mouseover', function () {
image.style.display = 'block';
});
link.addEventListener('mouseout', function () {
image.style.display = 'none';
});
</script>
</body>
</html>Quelques éléments pour comprendre les principaux éléments.
Une page web est un simple fichier texte, décrite à l’aide du langage HTML (Hypertext Markup Language). La consultation d’une page web est initiée par la saisie de son URL dans un navigateur. Une requête est alors émise depuis le navigateur, et transmise à un serveur web en circulant de routeurs en routeur sur le réseau Internet. On parle d'architecture client/serveur. Le serveur traite la requête et renvoie la page web en réponse, qui a son tour transite sur le réseau Internet de routeur en routeur jusqu’au client. La page web, en tant que fichier texte peut alors être interprétée par le navigateur pour l’afficher.
Pour afficher une page web, le navigateur lit et interprète tout un ensemble d'instructions dans la page qui sont écrites dans trois langages :
- le langage HTML pour structurer le contenu
- la feuille de style CSS pour la mise en page (couleur, polices, design, positionnement des éléments...).
- et le Javascript pour ajouter la gestion de l'interaction (gestion des clics, des événements...) et la modification dynamique de la page.
En simplifiant, une page web est un fichier texte :
- qui contient du code HTML pour structurer le document ;
- qui est mise en forme et stylisé à l’aide d’une feuille de style CSS ;
- qui peut être enrichie avec du code Javascript pour ajouter de l'interactivité et des fonctionnalités avancées.
- qui peut être liée à d’autres pages à l'aide de liens ;
- qui est stocké (hébergé) dans un serveur web connecté à Internet ;
- qui est envoyé au navigateur par un serveur web à l'aide d'une URL via le protocole d’application HTTP ;
- qui est interprété (lu et analysé) par le navigateur pour être affiché.
HTML, un langage de balises
Les pages web affichent du contenu (image, titre, paragraphe, lien…) à partir d’une structure définie en HTML (HyperText Markup Language). C’est un langage de balises qui définit la structure d’une page. Son contenu s’écrit avec un système de balises ouvrantes <element> et fermantes </element>, qui indiquent au navigateur les éléments à afficher.
Quelques éléments HTML importants
- <!DOCTYPE html> — le doctype indique quelles sont les règles HTML à appliquer (ici c’est la version 5).
- <html></html> — l'élément qui encadre tout le contenu de la page.
- <head></head> — l'élément qui est utilisé comme une zone pour configurer toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cette zone qu'on mettra des mots-clés, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères…
- <meta charset="utf-8"> — Obligatoirement présent dans le <head>, il définit le jeu de caractères qui devrait être utilisé pour le document. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains.
- <title></title> — Obligatoirement présent dans le <head>, il définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée ou qui est utilisé dans les moteurs de recherche..
- <body></body> — Cet élément est celui qui contient tout le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite.
Bonne soirée.
Bonsoir Vincent et merci beaucoup pour ton temps et toutes tes explications,
Il faudra que je remplace les hover-link et hover-image par mes données mais surtout convertir le HTML en CSS non ?
Merci...
Bonne soirée :)
Bonjour Vodoraix,
Bonsoir Vincent et merci beaucoup pour ton temps et toutes tes explications,
Avec plaisir... ca me prend pas bcp de temps car j'avais déjà ces éléments de vulgarisation à dispo... je les utilise lorsque j'ai des apprentis/stagiaires qui découvre le dev web.
(...) mais surtout convertir le HTML en CSS non ?
Pas du tout, il faut voir le CSS comme un complément au code HTML. De la même manière que dans un logiciel de traitement de texte, d'abord tu structures ta rédaction (des paragraphes, des titres...) et ce n'est que dans un second temps que tu t'intéresses à la mise en forme (souligné, gras, italique, choix de la police, de la taille, des couleurs...).
Quelques éléments d'explications
Ajout de style inline dans la page (dans la section <head> avec la balise <style>)
Dans la page on trouve la règle CSS suivante :
<style>
#hover-image {
position: absolute;
display: none;
pointer-events: none;
}
</style>On peut la traduire par : Cherche dans la page web, la balise HTML qui a l'identifiant hover-image (autrement dit la règle écrit avec un # ne doit s'appliquer qu'à un seul élément) et applique lui les styles suivants :
- `position: absolute;` : Positionne l'élément par rapport à son premier ancêtre positionné.
- `display: none;`: Cache l'élément.
- `pointer-events: none;` : Désactive les interactions de la souris avec cet élément.
Remarque si tu souhaites que la règle CSS s'applique à plusieurs éléments, dans ce cas il faut que tu remplace l'identifiant par une classe (la sélection CSS d'une classe se fait avec un point (ex la class foo se selectionne avec .foo).
AJOUT DE L'IMAGE par défaut caché
Donc l'image ci-dessous dans la page est par défaut caché. Pour ajouter ton image il faut que tu remplaces <LIEN VERS UNE IMAGE> par ton url.
<img src="<LIEN VERS UNE IMAGE>" id="hover-image" alt="Hover image"/>
Deplacer l'image avec le curseur de la souris et la Rendre visible lorsque le lien est survolé
Pour rendre l'image visible au survol d'un élement HTML, on utilise du code Javascript (écrit dans la balise <script>)
<script>
let image = document.getElementById('hover-image');
let link = document.querySelector('.hover-link');
document.addEventListener('mousemove', function (e) {
image.style.left = e.pageX + 'px';
image.style.top = e.pageY + 'px';
});
link.addEventListener('mouseover', function () {
image.style.display = 'block';
});
link.addEventListener('mouseout', function () {
image.style.display = 'none';
});
</script>Le script commence par sélectionner deux éléments : l'image à afficher (hover-image) via la méthode getElementById (on sélectionne un élement à l'aide de son identifiant), et on sélectionne le lien à surveiller à l'aide du code `let link = document.querySelector('.hover-link');` On utilise la méthode `querySelector` pour sélectionner le premier élément dans le document qui correspond au sélecteur CSS spécifié, `.hover-link`. Ici, le sélecteur `.hover-link` indique que nous cherchons un élément avec la classe `hover-link`. L'élément trouvé est ensuite stocké dans la variable `link`.
Ensuite, on ajoute un écouteur d'événements pour suivre les mouvements de la souris.
- Chaque fois que la souris bouge, la position de l'image est mise à jour pour suivre le curseur (evenement mousemove). Ce qui veut dire que l'image bouge même lorsqu'elle n'est pas visible ! Elle suit le curseur de la souris tout le temps.
- Quand la souris survole le lien, l'image devient visible (evenement mouseover) via le changement de la propriété CSS display:block.
- Et quand la souris quitte le lien, l'image disparaît (evenement mouseout) via le changement de la propriété CSS display:none.
Si tu as 1heure devant toi, je t'invite à lire l'initiation CSS ci-dessous pour poser tes premières pièces de puzzle. Ce n'est pas si compliqué ^^.
Langage CSS
Ma page web a du style !
Le langage HTML définit la structure de base de votre page web, mais ne permet qu’une mise en page minimaliste. Pour ajouter des couleurs, mettre en forme du texte ou positionner les éléments dans votre page, il faut le définir à l'intérieur d’une feuille de style écrite en CSS (Cascading Style Sheets).
Mais que peut on faire en CSS ? Quelques exemples ci-dessous :
- Aligné les titre <h1> au centre de la page
- Mettre en forme les paragraphes <p> avec un texte en rouge et en gras, puis centré.
- Redimensionné les images de la page en 150 pixels par 100 pixels.
Comment associer un fichier de style CSS à une page HTML ?
Pour appliquer un style CSS à une page HTML, il est possible d’écrire les règles de style de la page directement dans la balise <style> qu’on ajoute dans la balise <head>, de la manière suivante :
<html>
<head>
<meta charset="utf-8">
<title>Studio Ghibli website</title>
<style>
h1 {
text-align:center; font-size:60px;
}
</style>
</head>
<body>
(...)
</body>
</html>Cependant, il est préférable de créer un autre fichier texte pour stocker le code CSS, par souci de clarté et de simplicité de lecture. Pour appliquer une feuille de style CSS (un simple fichier texte) à la page HTML, on fait référence à ce fichier en l’insérant dans la balise <head> à l’aide de la balise <link> de la manière suivante :
<html>
<head>
<meta charset="utf-8">
<title>Studio Ghibli</title>
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
(...)
</html>Et le fichier main.css contient des instructions de style, qu’on appelle règles CSS. Par exemple :
/* ./styles/main.css */
h1 {
text-align:center;
font-size:60px;
}
p {
color:red;
}
img {
width:200px;
}Consulter et interagir avec le style CSS d’une page
Pour consulter le code d’une page web, on peut utiliser l'outil DevTools intégré dans Chrome ou dans Edge. Pour l’utiliser, il suffit d’appuyer sur la touche F12, ou bien de choisir “Inspecter la page” avec sa souris.
Ci-dessous, on voit que la balise <h1> est sélectionnée dans la page, avec dans l’onglet “Styles”, les instructions CSS qui lui sont appliquées et leur origine (main.css et user agent).Par défaut, l'éditeur “Styles” affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :
- Les règles qui s'appliquent à l'élément courant sont affichées en commençant avec les règles les plus spécifiques et en terminant avec les règles les moins spécifiques. En cliquant sur une balise du code HTML, on peut sélectionner un nouvel élément à inspecter.
- Il est possible de cocher les boîtes à côté de chaque déclaration pour voir l'effet qui serait obtenu si la déclaration était supprimée.
- Vous pouvez cliquer sur le nom d'une propriété ou d'une valeur pour éditer sa valeur en live et immédiatement voir le changement.
- À côté de chaque règle, si celle-ci est « dépliée », vous pouvez voir le nom du fichier et la ligne sur laquelle la règle est définie. En cliquant sur le lien, vous arriverez directement sur le fichier CSS.
Anatomie d’une règle CSS
La définition d’une règle CSS respecte toujours la même structure.
Dans une règle CSS, on trouve dans une règle de style 4 parties :
- Le sélecteur : C’est le nom de la balise HTML qui permet de sélectionner les éléments dans la page web sur lesquels on souhaite appliquer le style souhaité. Dans le cas d’un sélecteur par balise HTML, le style s’appliquera à toutes les occurrences. Par exemple, la règle “
p { color:red; }” indique que toutes les balises <p> de la page seront en rouge.
Mais si on veut appliquer un style que sur un élément en particulier, on utilise d'autres types de sélecteur. Par exemple le sélecteur par identifiant <p id=”introduction”></p> ou bien par classe <p class=”commentaires”></p>. - La description : C’est la définition de la règle qui détermine quelles sont les propriétés de l’élément que l’on veut mettre en forme (couleur, taille, position, bordure, margin, padding…). Elle doit être écrite entre accolades ({}).
- La propriété : Les différentes façons dont on peut mettre en forme un élément HTML. Dans le cas de la règle “p { color:red; }” , alors “color” est une propriété de l’élément <p>.
- La valeur de la propriété : À droite de la propriété, après les deux points, on renseigne la valeur de la propriété.
Principaux sélecteur CSS
Pour appliquer un style CSS dans une page web, on a vu qu’on peut choisir une balise à l’aide d’un sélecteur. Mais ce n’est pas tout, il est possible de faire des sélections plus spécifiques.
Type sélecteur | Description de ce qu’il sélectionne | Exemple |
| Sélecteur de balise | Tous les éléments du type de balise choisi. | “p { color:red; }” sélectionne toutes les balises <p> dans la page. |
| Sélecteur par identifiant | Sélectionne un unique élément de la page à l’aide de son identifiant. Attention, dans une page HTML, on ne peut avoir qu’un seul élément pour un ID donné. Il est strictement interdit d'utiliser un identifiant à plusieurs endroits (cela rompt le contrat d'unicité de l'élément). On ajoute un identifiant à une balise HTML avec l’attribut “id” de la manière suivante :
| “ Ce n’est pas forcément une balise <p>, ca marche aussi avec toutes les autres types de balises <a id="introduction"> |
| Sélecteur de classe | Sélectionne tous les éléments de la page qui sont de la classe choisie. Dans une page HTML, on peut avoir plusieurs éléments différents avec la même classe. On ajoute une classe à une balise HTML avec l’attribut “class” de la manière suivante. Remarquons qu'il est tout à fait possible d'ajouter la même classe a des balises de nature différentes.
| “.crazy { color:purple; }” sélectionne tous les éléments qui ont la classe “crazy” dans la page. |
| Sélecteur d’attribut | Sélectionne un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut. | La règle “ La règle “ La règle “ |
opérations sur les sélecteurs CSS
Il est aussi possible de faire des opérations sur les sélecteurs, qu’on appelle combinateurs.
Sélection de tous les éléments.
Pour cela il suffit de placer plusieurs sélecteurs séparés par des virgules pour sélectionner plusieurs types d'éléments en une seule instruction. C’est une manière de factoriser le code pour qu’il soit plus rapide à écrire et à lire. Ci-dessous un exemple de sélection pour mettre en rouge tous les paragraphes, tous les liens et tous les titres de niveau 1 de la page.
p, a, h1 {
color: red;
}Sélection de tous les descendants
En séparant par un simple espace deux sélecteurs, on indique qu’on cible tous les éléments d’un type étant enfants direct ou descendant indirect. Ci-dessous, on sélectionne toutes les balises p qui sont enfants ou descendants de l'élément #introduction.
#introduction p {
font-style: bold;
}Combinateur de voisin direct
Cet opérateur permet de sélectionner uniquement le prochain élément. Celui qui “suit”.
div + p {
font-style: bold;
}Il existe une multitude d’autres types qui permettent d'effectuer des sélections plus complexes (voir sur le site developper mozilla)
Cascade et héritage d’un style
CSS est l'acronyme de “Cascading Style Sheets”. Mais c’est quoi une cascade de styles ? Cela signifie que l’ordre d'apparition des règles CSS a une importance dans sa résolution. Quand deux règles CSS ont la même spécificité, c’est la dernière déclarée dans le fichier qui sera utilisé pour la mise en forme. Le dernier qui parle, a raison !
Dans l'exemple ci-dessous deux règles s'appliquent à <h1>. Mais au final <h1> est coloré en bleu. C'est la règle écrite en dernier dans le CSS qui l'emporte.
h1 {color: red;}
(...)
h1 {color: blue;}Par défaut, toutes les balises HTML ont un style fourni par le navigateur qu’on appelle style user agent. Ces styles peuvent alors être personnalisés localement, par le choix d’un sélecteur direct, ou bien être personnalisés indirectement par héritage. En effet, les styles se transmettent automatiquement des balises parentes vers des balises enfants.
Par exemple, si on applique un style sur la balise <body>, alors ce style s’appliquera à toutes les balises enfants contenus dans la balise <body>. Ce qui est très pratique pour définir un style par défaut à une page, plutôt que de devoir le définir pour chaque élément. Dans l’exemple ci-dessous, tous les éléments de la page qui seront dans body seront écrit en blanc, avec un fond bleu et avec la police “verdana”.
/* ./styles/main.css */
body {
background-color:#0195C3;
color:white;
font-family:verdana;
}Les blocs ont des bordures, des marges interieurs et exterieurs
Généralement, on structure les blocs dans une page à l’aide de la balise <div>. C’est un bloc de contenu générique à laquelle on ajoute une classe pour lui donner un rôle par l'ajout d'une classe <div class=”presentation”>. On donne du sens à ce bloc par l'ajout d'une classe.
Mais il existe aussi des blocs de contenu spécialisé, et dans ce cas on parle de marquage sémantique, le nom de la balise est porteur de sens, mais ce n’est pas obligatoire de les utiliser pour créer une structure de page. C’est juste plus simple à lire !
- le <header> (zone en haut d’un site),
- le <main> (contenu principale qui peut avoir des sous-section <article>, <section> ou <div>). Il ne doit être utilisé qu’une seule fois par page.
- le <nav> (barre de navigation pour un menu),
- le <footer> (zone en bas d’un site)
- ou <aside> pour une barre latérale.
En CSS, un élément de type bloc ; comme la balise générique <div> ; se présente toujours :
- sous la forme d’un bloc qui occupe une taille (width x height)
- avec un espace libre à l'extérieur du bloc (marging) qui le sépare des autres éléments ;
- avec un espace libre à l'intérieur du bloc (padding) qui le sépare de son contenu. Par exemple l’espace autour du texte d’un paragraphe.
- avec une bordure visible ou non qui se situe juste autour du padding.
Pour appliquer un margin à une balise, on procède de la manière suivante. Pour les valeurs, il existe plusieurs jeux d’écriture.
p {
margin: 10px; /* toutes les marges fixés à 10px */
margin: 10px 20px; /* top & bottom à 10px et left & right à 20px */
margin: 10px 20px 30px 50px; /* Ordre top, right, bottom & left */
margin: 10px 0 0 0;
}Remarquons, qu'il est possible de définir un margin ou un padding que dans une direction spécifique (top, bottom, right ou left).
p {
margin-top: 10px;
}La gestion des bordures se fait avec trois propriétés css : border-width pour l’épaisseur du trait, border-style pour un trait plein, en pointillé ou fantaisiste et border-color pour sa couleur. De même, il est possible de définir une bordure que dans une direction spécifique (top, bottom, right ou left). Il existe un alias de propriété border qui permet une déclaration rapide de ces trois propriétés.
.information {
border: 1px solid black;
}
div {
border-top: 1px solid dashed;
}Le positionnement des éléments
Pour positionner les éléments dans une page, il existe de nombreuses méthodes en CSS avec leurs avantages et leurs inconvénients.
On peut citer
- le positionnement statique ou relatif,
- le positionnement dans une grille,
- le positionnement par flexbox pour disposer rapidement des éléments en ligne et en colonne
Bonsoir et merci beaucoup pour ttes tes explications.
Il me faudra un peu de temps pour tout comprendre :)
Sinon, j'ai édité le code et ça donne ce que tu px voir en capture jointe.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#hover-image {
position: absolute;
display: none;
pointer-events: none;
}
</style>
<title>Image au survol du lien</title>
</head>
<body>
<a href="#" class="hover-link">Survolez-moi</a>
<img src=https://sport-adapte-nutrition.fr/wp-content/uploads/2024/10/1.Changer-certaines-habitudes-alimentaires.pdf id="hover-image" alt="Hover image"/>
<script>
let image = document.getElementById('hover-image');
let link = document.querySelector('.hover-link');
document.addEventListener('mousemove', function (e) {
image.style.left = e.pageX + 'px';
image.style.top = e.pageY + 'px';
});
link.addEventListener('mouseover', function () {
image.style.display = 'block';
});
link.addEventListener('mouseout', function () {
image.style.display = 'none';
});
</script>
</body>
</html>
Y'a rien qui se passe qd je survol le lien mais y'a peut-être une erreur qqepart ;)
Merci
Bonne soirée :)
Hello,
Deux remarques
- Dans la balise img tu as oublié de mettre des guillemets pour l'attribut src.
- Et tu ne peux pas utiliser un fichier PDF comme source. Ton fichier doit etre un format d'image (e.g. png, jpg, bmp, webp...)
++
Désolé je peux pas mettre de liens dans mes posts :'
Bonjour Vincent,
Oui désolé mais avec les guillemets et une vraie image, tjrs pas :-(((
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#hover-image {
position: absolute;
display: none;
pointer-events: none;
}
</style>
<title>Image au survol du lien</title>
</head>
<body>
<a href="#" class="hover-link">Survolez-moi</a>
<img src="https://sport-adapte-nutrition.fr/wp-content/uploads/2024/08/1.Changer-certaines-habitudes-alimentaires_1-scaled.jpg" id="hover-image" alt="Hover image"/>
<script>
let image = document.getElementById('hover-image');
let link = document.querySelector('.hover-link');
document.addEventListener('mousemove', function (e) {
image.style.left = e.pageX + 'px';
image.style.top = e.pageY + 'px';
});
link.addEventListener('mouseover', function () {
image.style.display = 'block';
});
link.addEventListener('mouseout', function () {
image.style.display = 'none';
});
</script>
</body>
</html>Bonne soirée :)
Hello Vodoraix,
En créant un fichier test.html sur mon disque avec ce code, ca fonctionne chez moi avec ton image.
Tu utilises quel navigateur web (version) et quel OS ?
Coucou,
Suis rassuré que ça marche. Donc ça vient de ma config !
OS = Windows 11 Famille v24H2
Navigateur = Firefox 134.0.2 (64 bits)
Sinon j'ai installé le code sur mon constructeur de site WORDPRESS à l'adresse suivante :
https://sport-adapte-nutrition.fr/?page_id=76
En survolant "changer certaines habitudes alimentaires", y'a rien qui se passe :(
Merci encore
Bonne soirée :)
Hello,
Je ne suis pas utilisateur de Wordpress, désolé ^^.
Par contre à la lecture du code html de ta page, je constate que ton lien "changer certaines habitudes aimentaires) n'a pas de classe pour ajouter l'effet.
Est ce que tu veux que l'effet d'image sur la souris fonctionne sur tous les liens de ta page ? ou juste pour "changer certaines habitudes... " ?
<a class="elementor-button elementor-button-link elementor-size-sm" href="#retrouver-ligne">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">1. Changer certaines habitudes alimentaires</span>
</span>
</a>Si c'est pour tous les liens, il faut que tu ajoutes une classe à l'ensemble de tes liens,
<a class="hover-class-image elementor-button elementor-button-link elementor-size-sm " href="#retrouver-ligne">Si c'est pour un seul lien, il faut que tu ajoutes un id à ton node html,
<a id="hover-id- image" class="elementor-button elementor-button-link elementor-size-sm" href="#retrouver-ligne">
Et en suite tu ajoutes le code javascript (gestion d'evenement onmouseover onmouseout)
++Bonjour Vincent,
Merci d'insister !!! :)
En fait, j'ai besoin d'une image différente par lien comme tu px l'imaginer mais un code CSS par lien.
Car j'ai un espace CSS différent pour chacun des liens dans Wordpress ;)
Je viens d'essayer tes 2 paragraphes supplémentaires et rien de se passe. Mais je ne suis pas certain de les avoir bien placés puisque je les ai mis devant.
Merci
à+
<a class="elementor-button elementor-button-link elementor-size-sm" href="#retrouver-ligne">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">1. Changer certaines habitudes alimentaires</span>
</span>
</a>
<a class="hover-class-image elementor-button elementor-button-link elementor-size-sm " href="#retrouver-ligne">
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#hover-image {
position: absolute;
display: none;
pointer-events: none;
}
</style>
<title>Image au survol du lien</title>
</head>
<body>
<a href="#" class="hover-link">Survolez-moi</a>
<img src="https://sport-adapte-nutrition.fr/wp-content/uploads/2024/08/1.Changer-certaines-habitudes-alimentaires_1-scaled.jpg" id="hover-image" alt="Hover image"/>
<script>
let image = document.getElementById('hover-image');
let link = document.querySelector('.hover-link');
document.addEventListener('mousemove', function (e) {
image.style.left = e.pageX + 'px';
image.style.top = e.pageY + 'px';
});
link.addEventListener('mouseover', function () {
image.style.display = 'block';
});
link.addEventListener('mouseout', function () {
image.style.display = 'none';
});
</script>
</body>
</html>Re Vodoraix,
J'ai mis à jour l'exemple, avec une autre approche, pour gérer plusieurs images.
Cela te permettra d'avoir le code javascript et la structure HTML associé pour l'implémenter dans ton template Wordpress.
Explications
Le code javascript (présent dans la balise <script> en fin de page avant </body>) prend en charge l'affichage de l'image au survol de certains liens. L'image disparait dés que la souris quitte les liens.
data-hover-image-url, l'image définit dans ce dernier s'affiche à la position du curseur.1. Création de l'image de survol
En javascript à l'aide de la méthode createElement, il est possible de créer dynamiquement des éléments dans la page. On l'utilise pour créer l'image de survol qui lors de l'initilisation est une image vide (sans url associé) et qui n'est pas visible.
let hoverImage = document.createElement('img'); // Créer un nouvel élément <img>
hoverImage.style.position = 'absolute'; // Permet de positionner l'image selon la position de la souris
hoverImage.style.display = 'none'; // Cache le nœud par défaut
document.body.appendChild(hoverImage); // Ajouter le nœud image au <body> de la page2. Suivi de la souris
Lors du mouvement de la souris, on écoute l"événement "mousemove' sur la page (DOM) afin de déplacer l'image au niveau du curseur. La position de l'image est mise à jour avec les coordonnées du curseur (event.pageX pour la position horizontale et event.pageY pour la verticale). Un décalage de +10px est ajouté pour espacer légèrement l'image du curseur.
document.addEventListener('mousemove', function (event) {
if (hoverImage.style.display !== 'none') {
hoverImage.style.left = `${event.pageX + 10}px`;
hoverImage.style.top = `${event.pageY + 10}px`;
}
});3. Ajout de liens "survolables"
Dans la structure HTML, on ajoute deux liens avec la convention suivante.
Ces liens ont la classe hoverArea et on un data attribut personnalisé data-hover-image-url qui contient l'URL de l'image à afficher lorsque l'utilisateur survole un lien. Ces images sont affichées dynamiquement au survol de chaque lien,
<div class="links">
<a class="hoverArea"
data-hover-image-url="ici tu met une url vers une image"
href="./lien-vers-une-page">
1. Changer certaines habitudes alimentaires
</a>
<a class="hoverArea"
data-hover-image-url="ici tu met une url vers une image"
href="./lien-vers-une-page">
2. Alimentation & Activités physiques<br><br>La part de leur importance
</a>
</div>4. Gestion de l'événement mouseover sur chaque liens "survolables"
Pour sélectionner tous les liens survolables, on utilise la méthode querySelectorAll avec le sélecteur ('a[data-hover-image-url]'). Puis on itère pour chaque lien (via un simple parcours de boucle) afin d'y attacher un gestionnaire d'évenement de survol de souris (mouseover).
Lorsque la souris survole un lien, l'URL de l'image à afficher est récupérée via l'attribut data-hover-image-url du lien. L'image est ensuite mise à jour et rendue visible en modifiant sa src et son style (display: block).
const hoverLinks = document.querySelectorAll('a[data-hover-image-url]');
hoverLinks.forEach(link => {
link.addEventListener('mouseover', function() {
let hoverImageUrl = link.getAttribute('data-hover-image-url');
console.log('Mouseover with hoverImageUrl : ', hoverImageUrl);
hoverImage.src = hoverImageUrl;
hoverImage.style.display = 'block';
});
});<br>5. Cacher l'image lorsqu'il n'y a plus de survol de ces liens
On ajoute un autre événement mousemove pour détecter si la souris est actuellement sur l'un des liens. La méthode matches(':hover') vérifie si un lien est survolé par la souris à l'aide de la pseudo-classe CSS :hover.
Si aucun des liens n'est survolé (c'est-à-dire que isHoveringLink est false), l'image est cachée en la mettant de nouveau en display: none.
document.addEventListener('mousemove', function() {
let isHoveringLink = false;
for (const link of hoverLinks) {
if (link.matches(':hover')) {
isHoveringLink = true;
break;
}
}
if (!isHoveringLink) {
hoverImage.style.display = 'none';
}
});
</code>Code complet
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images au survol du lien</title>
<style>
.links {
display: flex;
flex-direction: column;
padding: 20px;
width: max-content;
}
.links a {
display: block;
padding: 10px;
margin: 5px 0;
background-color: #e0e0e0;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.links a:hover {
background-color: #d6d6d6;
}
</style>
</head>
<body>
<div class="links">
<a class="hoverArea"
data-hover-image-url="ici tu met une url vers une image"
href="./lien1">
1. Changer certaines habitudes alimentaires
</a>
<a class="hoverArea"
data-hover-image-url="ici tu met une url vers une autre image"
href="./lien2">
2. Alimentation & Activités physiques<br><br>La part de leur importance
</a>
</div>
<script>
// Attendre que le DOM soit complètement chargé avant d'exécuter le script
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM is ready ^^.');
// Créer dynamiquement une image dans le DOM.
let hoverImage = document.createElement('img'); // Créer un nouvel élément <img>
hoverImage.style.position = 'absolute'; // Permet de positionner l'image selon la position de la souris
hoverImage.style.display = 'none'; // Cache le nœud par défaut
document.body.appendChild(hoverImage); // Ajouter le nœud image au <body> de la page
// Suit la position du curseur et déplace l'image "hoverImage" en conséquence, lorsque l'image est visible.
document.addEventListener('mousemove', function (event) {
if (hoverImage.style.display !== 'none') {
hoverImage.style.left = `${event.pageX + 10}px`;
hoverImage.style.top = `${event.pageY + 10}px`;
}
});
// Sélectionner tous les liens de la page ayant un attribut 'data-hover-image-url'
const hoverLinks = document.querySelectorAll('a[data-hover-image-url]');
// Parcours de tous les liens pour attacher l'événement de survol de la souris (mouseover) à chaque lien de la collection
hoverLinks.forEach(link => {
link.addEventListener('mouseover', function() {
// Récupération de l'URL de l'image dans le data attribute associé
let hoverImageUrl = link.getAttribute('data-hover-image-url');
console.log('Mouseover with hoverImageUrl : ', hoverImageUrl);
// Mise à jour de la source (url) de l'image hover, et de son style pour la rendre visible
hoverImage.src = hoverImageUrl
hoverImage.style.display = 'block';
});
});
// Cacher l'image si la souris ne survole aucun des liens "hoverLinks"
document.addEventListener('mousemove', function() {
// Test si un des liens "hoverLinks" est en train d'être survolé par la souris via la pseudo-classe ":hover"
let isHoveringLink = false;
for (const link of hoverLinks) {
if (link.matches(':hover')) {
isHoveringLink = true;
break;
}
}
// Et si la souris ne survole aucun des liens, alors on cache l'image.
if (!isHoveringLink) {
hoverImage.style.display = 'none';
}
});
});
</script>
</body>
</html>Bonsoir Vincent et merci beaucoup :) :) :)
J'ai essayé mais ça ne veut tjrs pas. J'ai dû changer un peu le code car je ne peux pas faire plusieurs liens dans le même code puisque chaque lien a son emplacement CSS.
J'ai pris la page sport car elle est plus rapide au téléchargement :
https://sport-adapte-nutrition.fr/?page_id=74
J'ai enlevé la partie suivante de ton code, c-à-d le 2ème lien car encore une fois je ne px faire qu'un lien à la fois :
Et ça donne ça :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Images au survol du lien</title>
<style>
.links {
display: flex;
flex-direction: column;
padding: 20px;
width: max-content;
}
.links a {
display: block;
padding: 10px;
margin: 5px 0;
background-color: #e0e0e0;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.links a:hover {
background-color: #d6d6d6;
}
</style>
</head>
<body>
<div class="links">
<a class="hoverArea"
data-hover-image-url="https://sport-adapte-nutrition.fr/wp-content/uploads/2025/01/1.Evaluations-Physiques-Respiratoires-1.png"
href="./lien1">
1. Evaluations Physiques & Respiratoires
</a>
</div>
<script>
// Attendre que le DOM soit complètement chargé avant d'exécuter le script
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM is ready ^^.');
// Créer dynamiquement une image dans le DOM.
let hoverImage = document.createElement('img'); // Créer un nouvel élément <img>
hoverImage.style.position = 'absolute'; // Permet de positionner l'image selon la position de la souris
hoverImage.style.display = 'none'; // Cache le nœud par défaut
document.body.appendChild(hoverImage); // Ajouter le nœud image au <body> de la page
// Suit la position du curseur et déplace l'image "hoverImage" en conséquence, lorsque l'image est visible.
document.addEventListener('mousemove', function (event) {
if (hoverImage.style.display !== 'none') {
hoverImage.style.left = `${event.pageX + 10}px`;
hoverImage.style.top = `${event.pageY + 10}px`;
}
});
// Sélectionner tous les liens de la page ayant un attribut 'data-hover-image-url'
const hoverLinks = document.querySelectorAll('a[data-hover-image-url]');
// Parcours de tous les liens pour attacher l'événement de survol de la souris (mouseover) à chaque lien de la collection
hoverLinks.forEach(link => {
link.addEventListener('mouseover', function() {
// Récupération de l'URL de l'image dans le data attribute associé
let hoverImageUrl = link.getAttribute('data-hover-image-url');
console.log('Mouseover with hoverImageUrl : ', hoverImageUrl);
// Mise à jour de la source (url) de l'image hover, et de son style pour la rendre visible
hoverImage.src = hoverImageUrl
hoverImage.style.display = 'block';
});
});
// Cacher l'image si la souris ne survole aucun des liens "hoverLinks"
document.addEventListener('mousemove', function() {
// Test si un des liens "hoverLinks" est en train d'être survolé par la souris via la pseudo-classe ":hover"
let isHoveringLink = false;
for (const link of hoverLinks) {
if (link.matches(':hover')) {
isHoveringLink = true;
break;
}
}
// Et si la souris ne survole aucun des liens, alors on cache l'image.
if (!isHoveringLink) {
hoverImage.style.display = 'none';
}
});
});
</script>
</body>
</html>