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>

1) Le fond de ce paragraphe
est de couleur cyan.
Cyan est le nom plus précis pour définir la couleur bleu ciel.
Mais la couleur du fond change lorsque la souris passe sur le paragraphe.
Elle change encore une fois, lorsque la souris sort du paragraphe.
Code :
<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>


2) Cette fois, le fond change, ainsi que la couleur et la taille des caractères.
Plusieurs insctuctions javascript sont données dans une seule commande.
Lorsqu'il y en aura trop, les fonctions devront etre introduites.
Code :
<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 !
Et en plus, seulement en allant sur ce mot .
Cliquez sur le mot précédent donne un autre effet.
Cliquez ici pour revenir à la taille de 12pt .
Code :
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 :
Cliquez sur moi pour voir une surprise.     Cliquez sur moi pour voir une surprise.
Code :
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.
plus d'info
Code :
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   arrow   bgweb.html   arrow   exemples.html   arrow   a3js1005_javascript_homeopathique.html


Page mise à jour le 29 janvier 2016 par Bernard Gisin
Hébergement par : www.infomaniak.ch