Changement d'une image au passage de la souris CSS / HTML
Résolu/Fermé
MrWhitediamond
Messages postés
31
Date d'inscription
mardi 6 janvier 2015
Statut
Membre
Dernière intervention
21 novembre 2015
-
6 janv. 2015 à 12:49
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 - 7 janv. 2015 à 17:31
MrWhitediamond Messages postés 31 Date d'inscription mardi 6 janvier 2015 Statut Membre Dernière intervention 21 novembre 2015 - 7 janv. 2015 à 17:31
A voir également:
- Changement d'une image au passage de la souris CSS / HTML
- Quelle touche pour débloquer la souris ? - Guide
- Piratage facebook changer mot de passe - Guide
- Image iso - Guide
- Editeur html - Télécharger - HTML
- Changement d'écriture - Guide
2 réponses
Kopros
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
Modifié par Kopros le 7/01/2015 à 15:03
Modifié par Kopros le 7/01/2015 à 15:03
En css tu peux utiliser :hover, c'est le css qui va remplacer celui d'avant au moment où la souris passe, et qui ne va plus s'appliquer quand la souris sera ailleurs.
Il faut commencer par mettre un id sur chaque élément du menu afin qu'on puisse les identifier individuellement dans le css.
Le problème c'est qu'avec ton html actuel tu ne peux pas mettre en relation les liens du menu avec la balise de la classe image dans le css.
Soit tu refais l'html, soit tu passes par du javascript.
Si tu refais l'html, il faut 1 balise de classe image à l'intérieur de chaque lien du menu, ça donnerait un truc comme ça :
HTML :
etc
CSS :
Tu remarqueras que j'ai mis un span et non un div, car selon le W3C on ne peut pas mettre de div dans une balise a.
Et faut voir pour positionner toutes les balises .images au même endroit, ce qui peut être pénible à faire.
Si tu passes par le javascript, le mieux c'est de passer par la bibliothèque jQuery (télécharge ici : https://jquery.com/download/ )
Tu peux faire un truc comme ça :
Personnellement je trouve que c'est moins relou de faire le js, surtout avec jquery.
EDIT : p'tites erreurs dans le code
Il faut commencer par mettre un id sur chaque élément du menu afin qu'on puisse les identifier individuellement dans le css.
Le problème c'est qu'avec ton html actuel tu ne peux pas mettre en relation les liens du menu avec la balise de la classe image dans le css.
Soit tu refais l'html, soit tu passes par du javascript.
Si tu refais l'html, il faut 1 balise de classe image à l'intérieur de chaque lien du menu, ça donnerait un truc comme ça :
HTML :
<a href="Home.html" title="Home" id="home_page_link">Home<span class="image"></span></a> <a href="Trip.html" title="Trip" id="trip_page_link">Trip<span class="image"></span></a>
etc
CSS :
.image{ display : inline-block; width: xxxpx; /*dimension de l'image*/ height: xxxpx; (...) } #home_page_link:hover .image { background: url(ton/image.png); }
Tu remarqueras que j'ai mis un span et non un div, car selon le W3C on ne peut pas mettre de div dans une balise a.
Et faut voir pour positionner toutes les balises .images au même endroit, ce qui peut être pénible à faire.
Si tu passes par le javascript, le mieux c'est de passer par la bibliothèque jQuery (télécharge ici : https://jquery.com/download/ )
Tu peux faire un truc comme ça :
<a href="Home.html" title="Home" data-image="ton/image/home.png">Home</a> <a href="Trip.html" title="Trip" data-image="ton/image/trip.png">Trip</a>
<script type="text/javascript"> $('.navigation a').hover(function(){ $('.image').css('background-image','url('+$(this).data('image')+')'); }); </script>
Personnellement je trouve que c'est moins relou de faire le js, surtout avec jquery.
EDIT : p'tites erreurs dans le code
MrWhitediamond
Messages postés
31
Date d'inscription
mardi 6 janvier 2015
Statut
Membre
Dernière intervention
21 novembre 2015
1
Modifié par MrWhitediamond le 7/01/2015 à 16:40
Modifié par MrWhitediamond le 7/01/2015 à 16:40
Merci beaucoup pour ta réponse mais je bidouille plus qu'autre chose en html / css. Je vais tenter de modifier mon html / css. Je te tiens au courant. :)
Kopros
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
7 janv. 2015 à 16:44
7 janv. 2015 à 16:44
De rien :)
Si t'es pas à l'aise avec html / css, le js est bien plus confortable dans ta situation (ça permet de pas trop modifier l'html en fait, ya juste l'attribut data-image à ajouter)
Si t'es pas à l'aise avec html / css, le js est bien plus confortable dans ta situation (ça permet de pas trop modifier l'html en fait, ya juste l'attribut data-image à ajouter)
MrWhitediamond
Messages postés
31
Date d'inscription
mardi 6 janvier 2015
Statut
Membre
Dernière intervention
21 novembre 2015
1
7 janv. 2015 à 16:46
7 janv. 2015 à 16:46
SI j'ai bien compris tu m'as fait tous le code en js ? car je serais incaple de le modifier pour etre honnete, mon language de prédilexion c'est l'objective C + visual basic :)
MrWhitediamond
Messages postés
31
Date d'inscription
mardi 6 janvier 2015
Statut
Membre
Dernière intervention
21 novembre 2015
1
7 janv. 2015 à 16:50
7 janv. 2015 à 16:50
Autrement le script doit etre mis dans le head ou bien le body ?
Kopros
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
Modifié par Kopros le 7/01/2015 à 16:55
Modifié par Kopros le 7/01/2015 à 16:55
Ouep !
Suffit de télécharger jQuery avec le lien que j'ai donné, et tu inclus le fichier .js dans le head des pages où y'a le menu.
La balise script que j'ai faite doit être mise juste avant le </body> (je vais la modifier pour ajouter un truc pour éviter les erreurs liées aux chargements incomplets lors de l'éxécution. J'sais pas si c'est clair ^^) et normalement ça devrait marcher, j'ai pas testé le code tu me diras
Edit : je peux plus modifier mon message, voici le code js à jour :
Suffit de télécharger jQuery avec le lien que j'ai donné, et tu inclus le fichier .js dans le head des pages où y'a le menu.
La balise script que j'ai faite doit être mise juste avant le </body> (je vais la modifier pour ajouter un truc pour éviter les erreurs liées aux chargements incomplets lors de l'éxécution. J'sais pas si c'est clair ^^) et normalement ça devrait marcher, j'ai pas testé le code tu me diras
Edit : je peux plus modifier mon message, voici le code js à jour :
<script type="text/javascript"> $(document).ready(function(){ $('.navigation a').hover(function(){ $('.image').css('background-image','url('+$(this).data('image')+')'); }); }); </script>
MrWhitediamond
Messages postés
31
Date d'inscription
mardi 6 janvier 2015
Statut
Membre
Dernière intervention
21 novembre 2015
1
Modifié par MrWhitediamond le 7/01/2015 à 17:04
Modifié par MrWhitediamond le 7/01/2015 à 17:04
Si j'ai bien compris une fois que j'ai telecharger jquerry. J'intégre le fichier jquerry.js a mon projet et j'ajoute cette balise <script src="jquerry.js">et ensuite j'ajoute ton code ?