Que fait le script suivant

J'ai une page et quand je souris sur les liens, il change une image et du code HTML sur une autre partie de la page. Cependant Im se demander comment ce script fonctionne et quand je regarde le script en haut de la page:Que fait le script suivant

<script type="text/javascript"> 
    var CONTENT_CURRENT = 0; 

    showContent = function() { 
     if (CONTENT_CURRENT > 0) { 
      var o = YAHOO.util.Dom.get('content' + CONTENT_CURRENT); 
      o.style.display = 'none'; 

      var a = YAHOO.util.Dom.get('link' + CONTENT_CURRENT); 
      a.style.color = '#46689e'; 
     } 
     var c = YAHOO.util.Dom.get('content' + arguments[0]); 
     c.style.display = 'block'; 

     var l = YAHOO.util.Dom.get('link' + arguments[0]); 
     l.style.color = '#000000'; 

     CONTENT_CURRENT = arguments[0]; 
    }; 

    YAHOO.util.Event.onDOMReady(function() { showContent('1'); }); 
    </script>

Comment ce script réglage de l'élément sur la page? La page actuelle est à l'adresse:

Link to site

Sous le titre 'Streaming Software Products' ...

Source

2011-05-27 Exitos

Il y a un autre bloc de code que vous devez regarder pour comprendre ce code

<div class="real-products-mid-lh"> 
    <a id="link5" href="/products/helix_server.aspx" onmouseover="showContent('5')">Helix Server</a><br /> 
    <a id="link1" href="/products/rlp.aspx" onmouseover="showContent('1')">Real License Program</a><br /> 
    <a id="link2" href="/products/helix_security_manager.aspx" onmouseover="showContent('2')">Helix Security Manager</a><br /> 
    <a id="link3" href="/products/real_player_enterprise_manager.aspx" onmouseover="showContent('3')">RealPlayer Enterprise</a><br /> 
    <a id="link4" href="/products/helix_mobile_server.aspx" onmouseover="showContent('4')">Helix Mobile Server</a><br /> 
    <a id="link6" href="/products/helix_proxy.aspx" onmouseover="showContent('6')">Helix Proxy</a><br /> 
    <a id="link7" href="/products/real_producer.aspx" onmouseover="showContent('7')">RealProducer</a><br /> 
    <a id="link8" href="/products/capture_station.aspx" onmouseover="showContent('8')">Accordent Capture Station</a><br /> 
    <a id="link9" href="/products/elp.aspx" onmouseover="showContent('9')">Real Education Licensing</a><br /> 
    <a id="link10" href="/products/helix_mobile_producer.aspx" onmouseover="showContent('10')">Helix Mobile Producer</a> 
    </div>

Ici, chaque lien de la liste appelle showContent avec un index comme argument. Il y a un tas de divs ci-dessous comme celui-ci:

<div id="content1" style="display:none;"> 
      <div class="real-products-mid-rh"> 
      <div class="real-products-logos"> 
       <table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #d6d6d6; height:107px;"> 
       <tr> 
        <td align="center"><a href="/products/rlp.aspx"><img src="/_common/images/logo_real_sm.gif" alt="Real License Program" style="vertical-align:middle" /></a></td> 
       </tr> 
       </table> 
       <table width="100%" cellpadding="0" cellspacing="0" style="border-left:1px solid #d6d6d6; border-right:1px solid #d6d6d6; border-bottom:1px solid #d6d6d6; padding-top:5px; padding-bottom:5px;"> 
       <tr align="center"> 
        <td><a href="/products/rlp.aspx"><strong>LICENSE PROGRAM</strong></a></td> 
        <td><a href="/products/rlp.aspx"><img src="/_common/images/px_more.gif" alt="Find out more" /></a></td> 
        <td>&nbsp;</td> 
       </tr> 
       </table> 
      </div> 
      <p><strong>Cost effective and all encompassing RealNetworks License Programme available exclusively to UK enterprise customers<br /> 
       <a href="/products/rlp.aspx">Real License Program &nbsp; <img src="/_common/images/px_more.gif" alt="Find out more" /></a></strong></p> 
      </div> 
     </div>

Cet ID de div est "content1". Ainsi, la fonction showContent fait trois choses:

S'il y a un div de contenu qui est visible , le rendre caché (display = none)
Faire le contenu souhaité div visible.
Définir le contenu visble actuel index.

Ceci provoque le changement du contenu à droite des liens au passage de la souris.

Source

2011-05-27 16:42:31

YAHOO.util.Dom.get() fonctionne comme document.getElementById()

o.style.display = 'none'; // hides current content 
a.style.color = '#46689e'; // paints current link blue 
c.style.display = 'block'; // displays new content 
l.style.color = '#000000'; // paints new link black

Source

2011-05-27 16:43:53 y34h

Que fait le script suivant

Répondre

Questions connexes