CSS3 : changer une image selon le lien survolé

Bonjour,

tu pourrais utiliser le javascript avec jQuery pour modifier le background de ta section, avec quelque chose de ce genre :

<!-- Ton menu avec les propriétés HTML5 data-flag sur les balises <a> où l'on inscrit le titre de l'image -->
<nav>
        <a href="#" data-flag="fr.jpg">Paris</a>
        <a href="#" data-flag="en.jpg">Londres</a>
        <a href="#" data-flag="es.jpg">Madrid</a>
</nav>
<!-- On défini le background de nav en css -->
<style>
nav { background: url("globe.jpg"); }
</style>
<! Un peu de javascript avec jQuery chargé au préalable -->
<script type="text/javascript">
$(document).ready(function(){
        // Lors du passage de la souris sur un lien <a> on modifie le background de <nav> 
        // avec la propriété data-flag du lien survolé
       $("a").hover(function(){
                $("nav").css({ "background", $(this).attr("data-flag") });
        });
});
</script>

Re-bonjour
Merci pour ta réponse. Cependant, il semble y avoir une erreur sur la ligne :

$("nav").css({ "background", $(this).attr("data-flag") });

Ne manque-t-il pas un attribut pour signaler qu'il faut mettre les informations de data-flag dans url:() ? (je dis ça mais je viens à peine de commencer le js, donc je ne sais pas encore comment tout modifier)
Sinon j'ai bien fait tout la manipulation comme tu me l'as décrit.
Merci encore

Oui effectivement, je l'ai omis. La correction est :

$("nav").css("background", "url("+ $(this).attr("data-flag")+ ")");

Je te conseille même de spécifier background-image plutôt que background, comme çà :

Pour le css :

<style>
nav { background-image: url("globe.jpg"); }
</style>

Et le js :

$("nav").css("background-image", "url("+ $(this).attr("data-flag")+ ")");

Je viens de tester mon script et il fonctionne.

Enjoy.

C'est bizarre, parce que dès que je mets no-repeat, mon image ne s'affiche plus.
Et est-ce possible de réafficher l'image d'origine une fois que l'on quitte le lien ? avec une ré-initialisation ou une suppression d'événement ?

D'ailleurs, serait-il possible de modifier le code javascript pour qu'il modifie une image ? (afin de pouvoir appliquer des transitions css3 avec de l'opacité sur l'image !)

<nav>
    <img src="globe.png" alt="carte"/>
        <a href="#" data-flag="france.png">Paris</a>
        <a href="#" data-flag="en.jpg">Londres</a>
        <a href="#" data-flag="es.jpg">Madrid</a>
</nav>

et avec un code javascript à peu près comme cela ?

$(document).ready(function(){
       $("a").hover(function(){ 
$("nav").img('src="'+ $(this).attr("data-flag")+ '"'); //En essayant de reprendre le même principe, mais je ne sais pas si c'est adapté      
});
});</script>

Ou alors utiliser plusieurs images cachées avec le css et les faire apparaitre après que quand un lien est sélectionné ?
Je ne sais pas si c'est clair.

Bonjour,

tu n'es pas contrainte de rajouter une image comme ça, tu peux utiliser l'évènement hover qui gère aussi la fin du survole :

$(document).ready(function(){
        // Sauvegarde de l'image d'origine
        var bg = $("nav").css("background-image");
        // Lors du survol d'un lien :
        $("a").hover(
                // Attribuer l'image du lien survolé sur la balise <nav>
                function() { $("nav").css("background-image", "url("+ $(this).attr("data-flag") +")"); },
                // A la sortie, remettre celui d'origine
                function() { $("nav").css("background-image", bg); }
        );      
});

Une version que je viens de mettre en ligne : noa.re/hover

merci c'est exactement ce que je voulais ! en plus je commence à mieux comprendre le fonctionnement du langage, merci beaucoup !

Heureux de t'avoir aider :)