Dynamic html-css

Commenter

Contenu du snippet

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 / Exemple : 


<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.

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Deny)