Bonjour à tous !
J'ai un petit problème concernant un menu que j'aimerai faire (en html5 et css3) :
<section id="test">
<ul>
<li><a href="#" title="Paris" class="paris" >Paris</a></li>
<li><a href="#" title="Madrid" class="madrid" >Madrid</a></li>
<li><a href="#" title="Genève" class="geneve" >Genève</a></li>
<li><a href="#" title="Séoul" class="seoul" >Séoul</a></li>
<li><a href="#" title="Rio de janeiro" class="rio" >Rio de janeiro</a></li>
</ul>
</section>Lorsque qu'on arrive sur la page de ce "menu", j'aimerai qu'à côté de la liste s'affiche l'image d'un globe puis quand on survole un lien, cette image change pour afficher l'image d'un pays particulier.
J'avais pensé mettre dans le css une image de fond pour #test mais je ne pense pas que ce soit adapté, car si je veux faire disparaitre cette image pour en afficher une autre, je me retrouve coincée.
Quelles solutions me proposez-vous ? Si vous avez des tutos sur le sujet, je serai ravie, je n'en ai pas trouvé d'assez satisfaisant ...
Merci d'avance !
8 réponses
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
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.
merci c'est exactement ce que je voulais ! en plus je commence à mieux comprendre le fonctionnement du langage, merci beaucoup !