Page Web utilisant javascript à dose homéopathique.

<div> indique un début de section, avec retour à la ligne. Fin : </div>
<span> indique un début d'un texte, sans retour à la ligne. Fin : </span>

<div id="para02"
   style="background-color:rgb(0,255,255); color:rgb(0,0,0)"
   onmouseover="this.style.backgroundColor='rgb(0,130,0)';"
   onmouseout="this.style.backgroundColor='rgb(0,255,255)';">
1) Le fond de ce paragraphe<br>
est de couleur cyan.<br>
Cyan est le nom plus précis pour définir la couleur bleu ciel.<br>
Mais la couleur du fond change lorsque la souris passe sur le paragraphe.<br>
Elle change encore une fois, lorsque la souris sort du paragraphe.<br>
</div>

<div id="para03"
   style="background-color:rgb(0,255,255); color:rgb(0,0,0)"
   onmouseover="this.style.backgroundColor='rgb(0,130,0)'; 
                this.style.color='rgb(255,255,255)'; 
                this.style.fontSize='16pt';" 
   onmouseout="this.style.backgroundColor='rgb(255,130,130)'; 
               this.style.color='rgb(0,0,130)';
               this.style.fontSize='12pt';">
2) Cette fois, le fond change, ainsi que la couleur et la taille des caractères.<br>
Plusieurs insctuctions javascript sont données dans une seule commande.<br>
Lorsqu'il y en aura trop, les fonctions devront etre introduites.<br>
</div>

3) En plus d'avoir plusieurs instructions, on change les attributs d'un autre paragraphe !<br>
Et en plus, seulement en allant sur 
<span style="background-color:rgb(0,255,255);"
      onmouseover="document.getElementById('para02').style.backgroundColor='rgb(0,130,0)';
                   document.getElementById('para02').style.color='rgb(255,128,255)';"
      onmouseout="document.getElementById('para02').style.backgroundColor='rgb(0,255,255)';
                  document.getElementById('para02').style.color='rgb(0,80,0)';" 
      onclick="document.getElementById('para02').style.fontSize='16pt';" >
 ce mot
</span>.<br>
Cliquez sur le mot précédent donne un autre effet.<br>
<span style="background-color:rgb(0,255,90);"
      onclick="document.getElementById('para02').style.fontSize='12pt';" >
 Cliquez ici pour revenir à la taille de 12pt
</span>.<br>

4) Un petit GAG :<br>
<span id='s01' 
      style="background-color:rgb(0,255,255); color:rgb(0,0,0); visibility:visible;"
      onmouseover=" this.style.backgroundColor='rgb(255,255,0)';
                    this.style.color='rgb(255,255,0)';
                    document.getElementById('s02').style.backgroundColor='rgb(0,255,255)'; 
                    document.getElementById('s02').style.color='rgb(0,0,0)'; 
                    "
      onmouseout="  this.style.backgroundColor='rgb(0,255,255)';
                    this.style.color='rgb(0,0,0)';
                    document.getElementById('s02').style.backgroundColor='rgb(255,255,0)'; 
                    document.getElementById('s02').style.color='rgb(255,255,0)'; 
                    ">
 Cliquez sur moi pour voir une surprise.
</span>
   
<span id='s02'
      style="background-color:rgb(255,255,0); color:rgb(255,255,0)">
 Cliquez sur moi pour voir une surprise.
</span><br>

5) Apparition de plus de texte lors d'un clique sur un lien.<br>
<span id="info5_more" style="display:inline; font-size:80%;">
  <a href="javascript:void(0)"
     onclick="document.getElementById('info5').style.display='inline';  
              document.getElementById('info5_more').style.display='none';">plus d'info</a>
</span> 
<div id="info5" style="display:none;">
  <a href="javascript:void(0)"  style="font-size:80%;"
     onclick="document.getElementById('info5').style.display='none';
              document.getElementById('info5_more').style.display='inline';">moins d'info</a>
  <br> 
  Ici, on peut <b>afficher plus d'information</b> sans accéder à Internet.<br>
  Une combinaison de javascript et de style permet de faire cet effet.
</div>

La liste des événements gérables.

Plan du Site : home     bluegriffon      bluegriffon040_javascript_homeopathique.html

---

Page mise à jour le 24 février 2020 par   Bernard Gisin.