Sujet Précédent Sujet Suivant

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
Bonjour à tous,

J'ai besoin de votre aide car il faut dans le cadre de mes cours d'Anglais que je réalise un blog. Ayant peut de connaissance dans ces languages précisément, je me heurte à une petite difficultée ; je souhaiterai que lorsque je passe ma souris sur l'un des menus de mon blog que la photo qui si trouve en dessous change (une différente par menu).
La photo étant dans le .image de mon css.

Mon code html :
<html>
<head>
<title>Project Australia</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="navigation">
<a href="Home.html" title="Home">Home</a>
<a href="Trip.html" title="Trip">Trip</a>
<a href="Equipement.html" title="Equipement">Equipement</a>
<a href="Activities.html" title="Activities">Activities</a>
<a href="About.html" title="About">About</a>
</div>
<div class="logo"> <b>Project Australia</b></div>
<div class="image"></div>
<div class="leftcontent">
<div id="Australia"></div>

<h3>Why Australia ?</h3>
<h4>
Phasellus id est. Quisque blandit eros sed pede. Quisque est. Donec lectus neque, posuere at, adipiscing id, lobortis id, nisl. Vivamus id ante. Aliquam ut augue. Fusce venenatis libero vel urna. Suspendisse quis dui sit amet purus tincidunt facilisis. Sed velit. Sed varius, nibh quis egestas aliquam, eros libero feugiat lorem, eu lobortis <br />
<br />Donec lectus neque, posuere at, adipiscing id, lobortis id, nisl. Vivamus id ante. Aliquam ut augue. Fusce venenatis libero vel urna. Suspendisse quis dui sit amet purus tincidunt facilisis. Sed velit. Sed varius, nibh quis egestas aliquam, eros libero feugiat lorem, eu lobortis urna velit ut turpis. Nulla vitae lacus. Quisque lectus lorem, cursus auctor, ornare non, dictum in, tortor. Suspendisse gravida. Ut volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque aliquam, tortor eget cursus faucibus, risus pede dictum orci, at vehicula magna quam quis lectus. Phasellus id est. Quisque blandit eros sed pede. Quisque est. Donec lectus neque, posuere at, adipiscing id, lobortis id, nisl. Vivamus id ante. Aliquam ut augue. Fusce venenatis libero vel urna. Suspendisse quis dui sit amet purus tincidunt facilisis. Sed velit. Sed varius, nibh quis egestas aliquam, eros libero feugiat lorem, eu lobortis urna velit ut turpis. </div></h4>
<div class="footer"> Thomas Vigier & Romain Morgan / 1re S1 </div>
<div class="bottomnav"> <a href="Home.html" class="footerl">Home</a> | <a href="Trip.html" class="footerl">Trip</a> | <a href="Equipement.html" class="footerl">Equipement</a> | <a href="Activities.html" class="footerl">Activities</a> | <a href="About.html" class="footerl">About</a> </div>
</div>
</body>
</html>

Mon CSS Shit :
url: "https://pastebin.com/5LAXCqra"

Merci d'avance !
A voir également:

2 réponses

Réponse 1 / 2
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
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 : 
<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
3
Réponse 2 / 2
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
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. :)
0
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
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)
0
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
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 :)
0
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
Autrement le script doit etre mis dans le head ou bien le body ?
0
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
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 : 

<script type="text/javascript">
        $(document).ready(function(){
                $('.navigation a').hover(function(){
                        $('.image').css('background-image','url('+$(this).data('image')+')');
                });
        });
</script>
0
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
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 ?
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Sur la plage...
kriiisss -
Utilisateur anonyme -

6 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse