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

Vue hybride

Message pr�c�dent Message pr�c�dent   Message suivant Message suivant
  1. #1
    Membre �clair�
    Profil pro
    Inscrit en
    Janvier 2004
    Messages
    495
    D�tails du profil
    Informations personnelles :
    �ge : 53
    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 : 53
    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 : 53
    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 : 53
    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