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 :

Rollover ..


Sujet :

JavaScript

  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    495
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Janvier 2004
    Messages : 495
    Par défaut Rollover ..
    Bonjour,

    J'ai un sommaire qui se presente sous cette forme :

    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
     
    <div id='description_encadre' Onmouseover='javascript:roll();'><ul id='sommaire_description'>
     
    <li>
     
    <a href="#sommaire_description" onclick="montre('smenu0');return false;" title="Description" id='somm0'>Description</a>
     
    </li>
     
    <li>
     
    <a href="#sommaire_description" onclick="montre('smenu1');return false;" title="Situation" id='somm1'>Situation</a>
     
    </li>
     
    <li>
     
    <a href="#sommaire_description" onclick="montre('smenu2');return false;" title="H&ocirc;tel" id='somm2'>H&ocirc;tel</a>
     
    </li>
     
    <li>
     
    <a href="#sommaire_description" onclick="montre('smenu3');return false;" title="Votre chambre" id='somm3'>Votre chambre</a>
     
    </li>
     
    <li>
     
    <a href="#sommaire_description" onclick="montre('smenu4');return false;" title="L'&eacute;quipe d'animation" id='somm4'>L'&eacute;quipe d'an (...)</a>
     
    </li>
     
    <li>
     
    <a href="#sommaire_description" onclick="montre('smenu5');return false;" title="Vos enfants" id='somm5'>Vos enfants</a>
     
    </li>
     
    </ul>
    <div class='spacer'>&nbsp;</div>
     
    <div id='description'>
     
    <div id='smenu0'>
     
    <h3>Description</h3><p>Situ&eacute; au cœur de la palmeraie, le club Look&eacute;a Issil est un lieu id&eacute;al pour d&eacute;couvrir la magie de Marrakech. Convivialit&eacute;, d&eacute;tente et animation dans un cadre exceptionnel.</p></div>
     
    <div id='smenu1'>
     
    <h3>Situation</h3><p>Au cœur de la palmeraie, &agrave; 10 minutes en taxi du centre ville ( navette gratuite plusieurs fois par jour pour le centre ville) et &agrave; 7 kilom&egrave;tres de l’a&eacute;roport.</p></div>
     
    <div id='smenu2'>
     
    <h3>H&ocirc;tel</h3><p>Le Look&eacute;a Issil ( cat&eacute;gorie 4*) se trouve au milieu d’un jardin de 6 hectares. Compos&eacute; de bungalows ou petits b&acirc;timents de 1 &eacute;tages aux couleurs ocres, c’est un havre de paix dont le centre est la grande piscine ext&eacute;rieure. A votre disposition : bureau de change, boutique et location de coffre fort.<br />
    <br />
    Avec participation : boisson en discoth&egrave;que, sauna, massages, VTT, &eacute;clairage des cours de tennis. A proximit&eacute;, &eacute;quitation, golfs, quads.</p></div>
     
    etc......


    Et j'aimerais faire un ptit effet, du style, au premier survol de la zone, le sommaire fait un tour de rollover... sans que la souris passe dessus..

    Donc j'ai le Onmouseover='javascript:roll();' sur le div qui encadre le tout..

    et j'ai ca :



    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
    var dejavu = 0;
     
    function roll()
    {
    if (dejavu == 0)
      {
      dejavu++;
        for (var z = 0; z<=20; z++) {
            if (document.getElementById('smenu'+z))
            {
                document.getElementById('somm'+z).style.color='#4F6CC8';
                document.getElementById('somm'+z).style.backgroundColor='white';
     
    setTimeout("montre('smenu"+z+"')",1000);
     
                document.getElementById('somm'+z).style.color='white';
                document.getElementById('somm'+z).style.backgroundColor='';
     
     
            }
        }
      }
     
     
    }

    Le probleme, c'est qu'on ne voit aucune alternance de couleurs sur le sommaire (fond en blanc, couleur 4F6CC8..) et l'affichage de la zone de texte passe direct a la derniere div... sans afficher les autres ou alors trop rapidement pour le voir, malgré le setTimeout....

    Je ne comprends pas tres bien comment faire ! merci !

  2. #2
    Membre éclairé
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    495
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Janvier 2004
    Messages : 495
    Par défaut
    personne ?

  3. #3
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    Tu as oublié de mettre la fonction montre dans le code que tu nous as donné donc un peu pas grand chose.

    Mais je me demande si le problème ne vient pas de l'id avec le z

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    495
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Janvier 2004
    Messages : 495
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function montre(id) {
    	var doc = document.getElementById(id);
    	for (var z = 0; z<=20; z++) {
    		if (document.getElementById('smenu'+z)) 
    		{
    			document.getElementById('smenu'+z).style.display='none';
    		}
    	}
    	if (doc) 
    	{
    		doc.style.display='block';
    	}
    }
    Voila la fonction montre...

    l'idee etant pour chaque case du sommaire de faire l'effet de rollover, une petite pause, reinitialiser la case tel qu'elle etait, et passer a la suivante..

  5. #5
    Inactif  
    Avatar de Kerod
    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    11 672
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 11 672
    Par défaut
    Ton problème est que tu ne vois pas le roll-over, mais juste hotel.

    avec ce petit code on voit bien les éléments, il reste plus qu'à ajouter la fonction de réinitialisation des blocks

    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
    function roll()
    {
    var tempo = 500;
    if (dejavu == 0)
      {
      dejavu++;
        for (var z = 0; z<3; z++) {
     
            tempo = tempo + 1000;    
    	document.getElementById('somm'+z).style.color='#4F6CC8';
                document.getElementById('somm'+z).style.backgroundColor='white';
    setTimeout("montre('smenu"+z+"')",tempo);
                document.getElementById('somm'+z).style.color='black';
                document.getElementById('somm'+z).style.backgroundColor='';
     
     
        }
    }
     
    }

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    495
    Détails du profil
    Informations personnelles :
    Âge : 52
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Janvier 2004
    Messages : 495
    Par défaut
    Merci, voila le resultat final ... !

    Et ca marche !



    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
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    <link rel='stylesheet' href='description.css' type='text/css'>
    <script type="text/javascript">
    function montre(id) {
    	var doc = document.getElementById(id);
    	for (var z = 0; z<=20; z++) {
    		if (document.getElementById('smenu'+z)) 
    		{
    			document.getElementById('smenu'+z).style.display='none';
    		}
    	}
    	if (doc) 
    	{
    		doc.style.display='block';
    	}
    }
     
     
     
    var dejavu = 0;
    var tempo = 500; 
     
    function roll()
    {
    if (dejavu == 0)
      {
      dejavu++;
        for (var z = 0; z<=20; z++) {
            if (document.getElementById('somm'+z))
            {
    						setTimeout("montre1('somm"+z+"')",tempo);
    						tempo = tempo + 500;
    						setTimeout("montre2('somm"+z+"')",tempo);
            }
        }
      }
     
     
    }
    function montre1(id)
    {
    	if (document.getElementById(id)) 
    	{
    	     document.getElementById(id).style.color='#4F6CC8';
           document.getElementById(id).style.backgroundColor='white';
    	}
    }
    function montre2(id)
    {
    	if (document.getElementById(id)) 
    	{
    	     document.getElementById(id).style.color='';
           document.getElementById(id).style.backgroundColor='';
    	}
     
    }
     
    </script>
    <div id="description_encadre" Onmouseover='javascript:roll();'> 
     
     
             <div id='flash'> 
        <object type='application/x-shockwave-flash' 
    	data='/images/swf/descriptif2.swf' width='225' height='400' bgcolor='#ffffff'> 
          <param name='movie' value='/images/swf/descriptif2.swf' /> 
          <param name='bgcolor' value='#ffffff' /> 
        </object> 
      </div> 
     
     
      <ul id='sommaire_description'> 
        <li> <a href="#sommaire_description" onclick="montre('smenu0');" title="Situation" id='somm0'>Situation</a> </li> 
        <li> <a href="#sommaire_description" onclick="montre('smenu1');" title="Hebergement" id='somm1'>Hebergement</a> </li> 
        <li> <a href="#sommaire_description" onclick="montre('smenu2');" title="Restauration" id='somm2'>Restauration</a> </li> 
        <li> <a href="#sommaire_description" onclick="montre('smenu3');" title="Sports et loisirs" id='somm3'>Sports et loisirs</a> </li> 
        <li> <a href="#sommaire_description" onclick="montre('smenu4');" title="Animation" id='somm4'>Animation</a> </li> 
        <li> <a href="#sommaire_description" onclick="montre('smenu5');" title="Pour vos enfants" id='somm5'>Pour vos enfants</a> </li> 
        <li> <a href="#sommaire_description" onclick="montre('smenu6');" title="Equipements" id='somm6'>Equipements</a> </li> 
      </ul> 
     
     
     
     
      <div id='description'> 
        <div id='smenu0'> 
          <h3>Situation</h3> 
          <p>Entre le quartier d'El Cortecito aux bars, restaurants et boutiques anim&eacute;s et le plus grand casino de la station baln&eacute;aire de Punta Cana, le club Carabela d&eacute;ploie ses jardins tropicaux au bord de la belle plage de B&aacute;varo, am&eacute;nag&eacute;e sur quelques 250m pour se reposer &agrave; l'ombre des cocotiers, bronzer au soleil et s'immerger dans les eaux chaudes des Cara&iuml;bes !<br /> 
          </p> 
        </div> 
        <div id='smenu1'> 
          <h3>Hebergement</h3> 
          <p>R&eacute;nov&eacute;es en 2004, les 474 chambres sont r&eacute;parties dans 10 petits b&acirc;timents de 2 &agrave; 4 &eacute;tages au coeur des jardins tropicaux, &eacute;quip&eacute;es de deux lits doubles ou un grand lit, salle de bains avec douche, WC et s&egrave;che-cheveux, air climatis&eacute;, t&eacute;l&eacute;phone, t&eacute;l&eacute;vision satellite, r&eacute;frig&eacute;rateur, coffre-fort priv&eacute; (avec suppl&eacute;ment), avec balcon en &eacute;tage ou terrasse en rez-de-jardin (vue jardin ou piscine).<br /> 
          </p> 
        </div> 
        <div id='smenu2'> 
          <h3>Restauration</h3> 
          <p>Repas sous forme de buffet, Snacks et d&icirc;ners aux restaurants &agrave; la carte (except&eacute; les fruits de mer), Boissons locales servies aux heures d'ouverture des bars et restaurants entre 9h et minuit (alcools, bi&egrave;re et vins locaux ; th&eacute; et caf&eacute; ; eau, jus et boissons gazeuses) et un choix de boissons nationales au casino. Restaurants : 1 restaurant de cuisine internationale en buffet ; 1 snack &agrave; la plage ; 3 restaurants &agrave; la carte (sp&eacute;cialit&eacute;s italiennes et mexicaines, sp&eacute;cialit&eacute;s de poissons et crustac&eacute;s avec suppl&eacute;ment) avec r&eacute;servation en avance sur place obligatoire. <br /> 
            Bars : pas moins de 5 bars dispers&eacute;s sur le domaine sont accessibles de 10h &agrave; minuit. <br /> 
            Bon &agrave; savoir : toutes les boissons import&eacute;es sont payantes ; toutes les boissons, locales et import&eacute;es, sont payantes en discoth&egrave;que ; les boissons locales sont factur&eacute;es au-del&agrave; de minuit.<br /> 
          </p> 
        </div> 
        <div id='smenu3'> 
          <h3>Sports et loisirs</h3> 
          <p>Piscines : 3 piscines avec solarium et transats ; 1 pataugeoire pour enfants ; 2 bains hydro massant. Plage : acc&egrave;s direct &agrave; la plage de sable de B&aacute;varo. Sports terrestres (selon disponibilit&eacute;) : 3 courts de tennis en terre battue, 1 table de ping-pong, salle de fitness, terrain de volley-ball, terrain de football. Sports nautiques (environ 1h par jour et par personne selon disponibilit&eacute;) : kayak de mer, nage libre avec palmes, masque et tuba, initiation &agrave; la plong&eacute;e sous-marine avec bouteille en piscine (1 session d'initiation par personne et par semaine).<br /> 
            <br /> 
            Loisirs payants :<br /> 
            <br /> 
            Tennis : &eacute;clairage nocturne des courts et location du mat&eacute;riel (balles et raquettes). Pr&ecirc;t de serviettes de bain en piscine ou plage : caution d'environ 16 euros/personne. Espace de massages &agrave; la carte. Sports nautiques (selon disponibilit&eacute;) : club de plong&eacute;e sous-marine (il est exig&eacute; sur place une attestation d'aptitude m&eacute;dicale pour les d&eacute;butants et une licence de plong&eacute;e pour les confirm&eacute;s), p&ecirc;che au gros au large, catamaran, ski nautique, banana boat. A proximit&eacute; de l'h&ocirc;tel (prestations ind&eacute;pendantes et non garanties) : &eacute;quitation, parcours de golf 18 trous.</p> 
        </div> 
        <div id='smenu4'> 
          <h3>Animation</h3> 
          <p>n saison : programme d'activit&eacute;s ludiques et sportives en journ&eacute;e (sessions collectives d'a&eacute;robic, de stretching, d'aquagym et de danse, tournois de beach-volley) et de spectacles en soir&eacute;e (soir&eacute;es &agrave; th&egrave;me, cabaret et shows d'artistes locaux). Discoth&egrave;que de l'h&ocirc;tel : entr&eacute;e libre, boissons payantes au bar. A proximit&eacute; de l'h&ocirc;tel : casino.</p> 
        </div> 
        <div id='smenu5'> 
          <h3>Pour vos enfants</h3> 
          <p>En saison : mini club pour enfants &acirc;g&eacute;s de 4 &agrave; moins de 12 ans encadr&eacute;s par des animateurs d&eacute;di&eacute;s (activit&eacute;s assur&eacute;es avec un minimum de 10 enfants inscrits). Equipements sp&eacute;ciaux : 1 pataugeoire pr&egrave;s des piscines adultes, 1 aire de jeux. Possibilit&eacute; de baby-sitting (&agrave; r&eacute;server et r&eacute;gler sur place).</p> 
        </div> 
        <div id='smenu6'> 
          <h3>Equipements</h3> 
          <p>Facilit&eacute; : permanence en r&eacute;ception. Services payants : salon de coiffure et de massages, boutiques de souvenirs, bureau de change, assistance m&eacute;dicale en saison (premiers secours), service de laverie, espace Internet (frais de connexion).</p> 
        </div> 
      </div>
     
     
     
     
      <script>
     
    window.onload=function() {montre("smenu0") };
     
    </script>
     
     
    </div>


    Merci à tous !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 31/08/2005, 18h32
  2. [CSS][Débutant] Rollover sur ligne d'un tableau
    Par Nyx de Tours dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 12/07/2005, 09h25
  3. [FLASH MX] Comment faire un rollover de 2 images ?
    Par clicman dans le forum Flash
    Réponses: 5
    Dernier message: 29/06/2005, 14h00
  4. Rollover sous firefox (bis)
    Par nicolb dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 03/03/2005, 14h53
  5. rollover sous firefox
    Par nicolb dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 01/03/2005, 16h37

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