<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.
<p id="para02" style="background-color:rgb(0,255,255); color:rgb(0,0,0)" onmouseover="style.backgroundColor='rgb(0,130,0)';" onmouseout="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> </p>
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.
<p id="para03" style="background-color:rgb(0,255,255); color:rgb(0,0,0)" onmouseover="style.backgroundColor='rgb(0,130,0)'; style.color='rgb(255,255,255)'; style.fontSize='16pt';" onmouseout="style.backgroundColor='rgb(255,130,130)'; style.color='rgb(0,0,130)'; 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> </p>
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
.
<p> 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="getElementById('para02').style.backgroundColor='rgb(0,130,0)'; getElementById('para02').style.color='rgb(255,128,255)';" onmouseout="getElementById('para02').style.backgroundColor='rgb(0,255,255)'; getElementById('para02').style.color='rgb(0,80,0)';" onclick="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="getElementById('para02').style.fontSize='12pt';" > Cliquez ici pour revenir à la taille de 12pt </span>. </p>
4) Un petit GAG :
Cliquez sur moi pour voir une surprise.
Cliquez sur moi pour voir une surprise.
.
<p> 4) Un petit GAG :<br> <span id='s01' style="background-color:rgb(0,255,255); color:rgb(0,0,0); visibility:visible;" onmouseover=" style.backgroundColor='rgb(255,255,0)'; style.color='rgb(255,255,0)'; getElementById('s02').style.backgroundColor='rgb(0,255,255)'; getElementById('s02').style.color='rgb(0,0,0)'; " onmouseout=" style.backgroundColor='rgb(0,255,255)'; style.color='rgb(0,0,0)'; getElementById('s02').style.backgroundColor='rgb(255,255,0)'; 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>. </p>
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="getElementById('info5').style.display='inline'; 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="getElementById('info5').style.display='none'; 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
page09_javascript_homeopathique.html
Page mise à jour le 31 décembre 2014 par Bernard Gisin
Hébergement par : www.infomaniak.ch