AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2008 12 03 23:48:31
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DYNAMIC HTML-CSS


Information sur la source

Catégorie :Effets Niveau : Initié Date de création : 20/01/2003 Date de mise à jour : 20/01/2003 10:30:20 Vu : 8 211
Auteur : Deny Ecrire un message privé
Note :
Aucune note
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

Description

Manipulation de formulaire onMouseOver et Out
Changements de présentation du formulaire.
Changements de valeur.
Par modification en ligne d'une table de CSS.

 

Source

  • <html>
  • <head>
  • <style type="text/css">
  • table {width: 100%; border-width:1%;padding: 1px; margin: 1px;}
  • td {border-width: 1px; border-color: white; border-style: solid;color: white;}
  • td.n1 {width : 30%;background-color: #661166;border-width:1px;border-color: white;}
  • td.n2 {width: 70%; background-color:#991166;border-width: 1px;}
  • p {font-size: 12px; font-family: Arial, sans-serif; font-weight: 300; margin : 1px; padding : 1px;color: white;}
  • body {background-color : white;}
  • .pol {font-size:16px; color: yellow}
  • input.texte1 {width:100%;background-color:#11357E; color: Yellow;}
  • input.texte2 {width:100%;background-color:#11357E; color: Yellow;}
  • input.texte3 {width:100%;background-color:#11357E; color: Yellow;}
  • </style>
  • <script>
  • function chg1() {
  • document.forms[0].elements[0].value = "Ceci est mon premier texte";
  • }
  • function ret1() {
  • document.forms[0].elements[0].value = "A propos 1";
  • }
  • function chg2() {
  • document.forms[0].elements[1].value = "Ceci est mon deuxième texte";
  • }
  • function ret2() {
  • document.forms[0].elements[1].value = "A propos 2";
  • }
  • function chg3() {
  • document.forms[0].elements[2].value = "Ceci est mon troisième texte";
  • }
  • function ret3() {
  • document.forms[0].elements[2].value = "A propos 3";
  • }</script>
  • </head>
  • <body>
  • <table cellspacing="1">
  • <tr>
  • <td class="n1" onMouseOver="document.styleSheets[0].rules[7].style.backgroundColor='yellow';document.styleSheets[0].rules[7].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px'; chg1();" onMouseOut="document.styleSheets[0].rules[7].style.backgroundColor='#11357E';document.styleSheets[0].rules[7].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px'; ret1();">
  • sujet
  • </td>
  • <td class="n2 pol"><form><p><input class="texte1" type="text" value="Texte principal"></p>
  • </td>
  • </tr>
  • <tr>
  • <td class="n1" onMouseOver="document.styleSheets[0].rules[8].style.backgroundColor='yellow';document.styleSheets[0].rules[8].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';chg2();" onMouseOut="document.styleSheets[0].rules[8].style.backgroundColor='#11357E';document.styleSheets[0].rules[8].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';ret2();">
  • sujet
  • </td>
  • <td class="n2 pol"><p><input class="texte2" type="text" value="Texte principal"></p>
  • </td>
  • </tr>
  • <tr>
  • <td class="n1" onMouseOver="document.styleSheets[0].rules[9].style.backgroundColor='yellow';document.styleSheets[0].rules[9].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';chg3();" onMouseOut="document.styleSheets[0].rules[9].style.backgroundColor='#11357E';document.styleSheets[0].rules[9].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';ret3();">
  • sujet
  • </td>
  • <td class="n2 pol"><p><input class="texte3" type="text" value="Texte principal"></p>
  • </form>
  • </td>
  • </tr>
  • <tr>
  • <td class="n1" colspan="3" onMouseOver="document.styleSheets[0].rules[5].style.backgroundColor='#661166';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';" onMouseOut="document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px';">
  • Cette couleur de fond
  • </td>
  • </tr>
  • <tr>
  • <td colspan="3" class="n1" style="background-color:darkblue" onMouseOver="document.styleSheets[0].rules[5].style.backgroundColor='darkblue'; document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';" onMouseOut="document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px';">
  • Celle-ci
  • </td>
  • </tr>
  • </table>
  • </body>
  • </html> 
<html>
<head>
<style type="text/css">
table {width: 100%; border-width:1%;padding: 1px; margin: 1px;}
td {border-width: 1px; border-color: white; border-style: solid;color: white;}
td.n1 {width : 30%;background-color: #661166;border-width:1px;border-color: white;}
td.n2 {width: 70%; background-color:#991166;border-width: 1px;}
p {font-size: 12px; font-family: Arial, sans-serif; font-weight: 300; margin : 1px; padding : 1px;color: white;}
body {background-color : white;}
.pol {font-size:16px; color: yellow}
input.texte1 {width:100%;background-color:#11357E; color: Yellow;}
input.texte2 {width:100%;background-color:#11357E; color: Yellow;}
input.texte3 {width:100%;background-color:#11357E; color: Yellow;}
</style>
<script>
function chg1() {
document.forms[0].elements[0].value = "Ceci est mon premier texte";
}
function ret1() {
document.forms[0].elements[0].value = "A propos 1";
}
function chg2() {
document.forms[0].elements[1].value = "Ceci est mon deuxième texte";
}
function ret2() {
document.forms[0].elements[1].value = "A propos 2";
}
function chg3() {
document.forms[0].elements[2].value = "Ceci est mon troisième texte";
}
function ret3() {
document.forms[0].elements[2].value = "A propos 3";
}</script>
</head>
<body>
<table cellspacing="1">
<tr>
	<td class="n1" onMouseOver="document.styleSheets[0].rules[7].style.backgroundColor='yellow';document.styleSheets[0].rules[7].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px'; chg1();" onMouseOut="document.styleSheets[0].rules[7].style.backgroundColor='#11357E';document.styleSheets[0].rules[7].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px'; ret1();">  
		sujet
	</td>
	<td class="n2 pol"><form><p><input class="texte1" type="text" value="Texte principal"></p>
	</td>
</tr>
<tr>
	<td class="n1" onMouseOver="document.styleSheets[0].rules[8].style.backgroundColor='yellow';document.styleSheets[0].rules[8].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';chg2();" onMouseOut="document.styleSheets[0].rules[8].style.backgroundColor='#11357E';document.styleSheets[0].rules[8].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';ret2();">
		sujet
	</td>
	<td class="n2 pol"><p><input class="texte2" type="text" value="Texte principal"></p>
	</td>
</tr>
<tr>
	<td class="n1" onMouseOver="document.styleSheets[0].rules[9].style.backgroundColor='yellow';document.styleSheets[0].rules[9].style.color='#11357E';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';chg3();" onMouseOut="document.styleSheets[0].rules[9].style.backgroundColor='#11357E';document.styleSheets[0].rules[9].style.color='yellow';document.styleSheets[0].rules[2].style.border='solid';ret3();">
		sujet
	</td>
	<td class="n2 pol"><p><input class="texte3" type="text" value="Texte principal"></p>
		</form>
	</td>
</tr>
<tr>
	<td class="n1" colspan="3" onMouseOver="document.styleSheets[0].rules[5].style.backgroundColor='#661166';document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';" onMouseOut="document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px';">
		Cette couleur de fond
	</td>
</tr>
<tr>
	<td colspan="3" class="n1" style="background-color:darkblue" onMouseOver="document.styleSheets[0].rules[5].style.backgroundColor='darkblue'; document.styleSheets[0].rules[2].style.border='dashed';document.styleSheets[0].rules[2].style.borderWidth='1px';" onMouseOut="document.styleSheets[0].rules[2].style.border='solid';document.styleSheets[0].rules[2].style.borderWidth='1px';">
		Celle-ci
	</td>
</tr>
</table>
</body>
</html>

Conclusion

La syntaxe de base du javascript est utilisée ici pour les références, c'est à dire les numéros à partir de 0.
document.styleSheets[0].rules[2] représentant le 3ème style défini de la première table.

 

Commentaires et avis

Aucun commentaire pour le moment.

Ajouter un commentaire

Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,140 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.