<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 Menu a3js1005_javascript_homeopathique.html
Page mise à jour le 27 janvier 2016 par Bernard Gisin
Hébergement par : www.infomaniak.ch