IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Menu dynamique + Slider


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    février 2011
    Messages
    4
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2011
    Messages : 4
    Points : 5
    Points
    5
    Par défaut Menu dynamique + Slider
    Bonjour,

    J'aimerai que mon slider en haut de la page fasse apparaître la bonne image parmi une liste de quelques unes (ainsi qu'éventuellement du texte).

    Je cherche à avoir le même résultat que ce site-là http://www.temminktrainingcoaching.nl/ au niveau de l'interactivité du menu dynamique supérieur.

    Avez-vous des idées de la façon de s'y prendre ?

    Merci

  2. #2
    Membre habitué Avatar de J_Lennon
    Inscrit en
    mars 2007
    Messages
    168
    Détails du profil
    Informations personnelles :
    Âge : 34

    Informations forums :
    Inscription : mars 2007
    Messages : 168
    Points : 172
    Points
    172
    Par défaut
    Salut

    voici une façon de faire, j'dis pas que c'est la meilleur:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <style type="text/css">
    	* {
    		padding: 0;
    		margin: 0;	
    	}
    	ul {
    		list-style: none;
    		width: 800px;
    		height: 50px;
    		line-height: 50px;
    		margin: 0 auto;
    	}
    	ul li {
    		float: left;
    		display: block;
    		height: 100%;	
    		width: 200px;
    		text-align: center;
    	}
    	ul li a {
    		display: block;
    		width: 100%; height: 100%;
    		text-decoration: none;
    		color: #FFF;	
    		background: #000;
    	}
    	ul li a:hover {
    		background: #FF6600;	
    	}
     
    	#slider {
    		width: 800px;
    		height: 200px;
    		margin: 0 auto;
    	}
     
    	#slider img {
    		position: absolute;	
    	}
     
    	.noDisplay {
    		display: none;	
    	}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){
      		$(".elmNav").mouseover(function(){
    			id = this.id;
    			$("#slider img").fadeOut("fast", function(){
    				$("#slider #img"+id).fadeIn("fast");
    			});
    		});
     	});
    </script>
    </head>
     
    <body>
    	<ul>
        	<li><a id="lien1" class="elmNav" href="#">Lien numero 1</a></li>
            <li><a id="lien2" class="elmNav" href="#">Lien numero 2</a></li>
            <li><a id="lien3" class="elmNav" href="#">Lien numero 3</a></li>
            <li><a id="lien4" class="elmNav" href="#">Lien numero 4</a></li>
        </ul>
    	<div id="slider">
        	<img id="imglien1" src="1.jpg" class="" />
            <img id="imglien2" src="2.jpg" class="noDisplay" />
            <img id="imglien3" src="3.jpg" class="noDisplay" />
            <img id="imglien4" src="4.jpg" class="noDisplay" />
        </div>
    </body>
    </html>
    en gros, chaque lien du menu a un id. Lorsque tu passes sur un lien, ceci se déclenche. Il commence par recupérer l'id du lien survolé puis cache toute les img ($("#slider img").fadeOut("fast") puis affiche la bonne: #slider #img+id en gros pour le lien 1: #slider #imglien1
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    $(".elmNav").mouseover(function(){
    			id = this.id;
    			$("#slider img").fadeOut("fast", function(){
    				$("#slider #img"+id).fadeIn("fast");
    			});
    		});
    un lien pour test la solution: http://bordeldetruc.com/lienSlider/index.html

    Le plus gros est fait, à toi de voir pour corrige ce qui ne va pas...
    Dans le doute reboot ou path ton chemin.

Discussions similaires

  1. [Free Pascal] Intégrer des valeurs dans un menu dynamique
    Par boullery dans le forum Free Pascal
    Réponses: 16
    Dernier message: 30/03/2005, 18h04
  2. Créer un sous-menu dynamiquement
    Par PurL dans le forum C++Builder
    Réponses: 4
    Dernier message: 09/09/2004, 11h31
  3. [JSP]menu dynamique en jsp
    Par laouedjahmed dans le forum Servlets/JSP
    Réponses: 3
    Dernier message: 22/03/2004, 11h50
  4. Menu dynamique sous Flash MX
    Par dens63 dans le forum Flash
    Réponses: 7
    Dernier message: 29/10/2003, 16h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo