18041 sujets

Questions générales et questions de débutants

Aide : Survol image

Bonjour !
Récemment mis dans le bain du monde du Web-Design, je suis actuellement en train de concevoir mon site qui me servira de base comme "carte de visite" pour mes projets d'illustrations.
Mais je bloque en ce moment sur un effet que je souhaite apporter et j'espère pouvoir me faire comprendre dans mon explication.

J'ai conçu une liste de boutons qui servirons pour accéder aux rubriques et je souhaiterais avec un conteneur droit faire un effet de diaporama qui changera selon le survol de la souris sur une de mes icones. En donnant l'exemple : au survol de la souris pour mon icone illustrations, je souhaite vouloir faire apparaitre à droite du conteneur une image associé et pareil pour le reste selon le thème.

Question : Comment pouvoir faire ça ?

Merci Smiley cligne
Bonjour,

J'ai à peu près compris ce que tu veux faire, en fait il va falloir que tu utilises un script javascript en pensant à ce cheminement de pensées:

Je détecte le survol > j'identifie l'icône survolée > je dis à mon conteneur d'afficher l'image correspondante.

en jQuery, ça pourrait donner un truc du style:

$('.iconeRubrique').mouseover(function(e){     // au survole de l'icône
 
  var idIcone = $(this).attr('id');       // je récupère l'id de l'icône
  var image;
  if( id=="voyage")                //je compare l'id et trouve l'image qui lui corresponds
        {
            image="voyage.png";
        }
    elseif( id =="abstrait")
        {
            image="abstrait.png";
        }
    else
        {
           image=" autre.png";
        }
$('#conteneur').css({"background-image":"url('images/"+image+"')"}); //Je fourni l'url correspondante
});


Attention, ce n'est qu'un exemple il faut que tu adaptes selon tes besoins, mais l'idée y est...

Voilà Smiley cligne
Modifié par Peter-L (10 Dec 2013 - 20:16)
salut,
je pense aussi que ça pourrait se faire en JS sauf si établies une structure HTML qui te permettrait de t'en passer.
Vu qu'un code est déjà présent, on va le faire en beaucoup plus simple:

$('.iconeRubrique').hover(function(){
	var idIcone = $(this).attr('id');
	$('#conteneur').css({"background-image":"url(images/"+idIcone+".png)"});
});
Oui effectivement en nommant les div comme les images c'est beauuuucoup plus simple on a pas besoin de faire les if Smiley eek Smiley eek

Merci de m'avoir corrigé Zelalsan Smiley cligne
Merci pour vos conseil.

J'ai pu essayer moult fois le code mais ça ne donne toujours rien. Pour en donner un exemple voici l'exemple de mon code HTML de ma page :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tek Terry the site</title>
<link href="css/screen.css" rel="stylesheet" type="text/css" />
<script>
$('.icone_retour').hover(function(){
var idIcone = $(this).attr('id');
$('#conteneur_droitbis').css({"background-image":"url(img/bannière_illustrations.png)"});
});
</script>
</head>
<body>
<div id="centre">
<div class="conteneur_centre">
<div class="entete"><img src="img/Bannière Tek Terry.png"/>
<div class ="conteneur_gauche">
<div class="zone_navigation_2">
<div class="illustration"> <a href="Illustrations couleurs.php"><img src="img/bannière_illustrations.png"/></a></div>
<a href="ConceptionMontage_graphiques.php"><img class="infographie" src="img/bannière_infographie.png"/></a>
<a href="Illustrations couleurs.php"><img class="projets_bd" src="img/bannière_projets.png"/></a>
<a href="Illustrations couleurs.php"><img class="flash" src="img/bannière_flash.png"/></a>
<a href="Illustrations couleurs.php"><img class="web_design" src="img/bannière_webdesign.png"/></a>
</div>
<div id="conteneur_droitbis">
<p>Bla bla bla bla</p>
</div>
</div>
<footer class="pied"><p> Tristan NAVARRO © 2013-2014 </p></footer>
</div>
</div>
</body>
</html>

Peut être s'agit t'il d'une erreur ou d'un truc que j'ai pas compris mais comme je n'ai pas pratiqué du Jquery dans ma formation, je n'arrive pas à savoir ce qui va pas.
Modifié par TekTerry (16 Dec 2013 - 00:35)
Sujet clos
Aller à