Alex XIV
Admin
Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007
 |  Sujet: Cours n°3  Mer 14 Fév 2007 - 11:32 | |
| Appliquer un style css externe à la page en cliquant sur un bouton, Solution simplifiée: - Citation :
- <html>
<head>
<title> CSS - Appliquer des css sur la page</title>
<!-- Ce script va nous permettre d'appliquer des styles css externes en appuyant sur un bouton-->
<link rel="stylesheet" type="text/css" href="st1.css">
<script language="javascript">
function changer(nom){
document.styleSheets[0].href=nom;
}
</script>
</head>
<body topmargin="60">
<center>
<form>
<!-- Value sera appliqué ci dessus dans la fonction changer, à la place de nom -->
<input type="radio" value="st1.css" name="st" onclick="changer(this.value)">
<input type="radio" value="st2.css" name="st" onclick="changer(this.value)">
<input type="radio" value="st3.css" name="st" onclick="changer(this.value)"><br /><br />
</form>
<img src="im.jpg" width="200"><br/><br />
<table width="400">
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dolor. Nam in nunc non justo commodo sollicitudin. Mauris tincidunt aliquam lacus. Etiam sed neque. Fusce eros urna, tristique sed, sodales at, condimentum nec, ipsum. Quisque tincidunt. Sed leo massa, aliquam non, tempus sit amet, imperdiet nec, dui. Maecenas nunc. Sed vel augue non leo imperdiet hendrerit. Aliquam sit amet lacus quis pede mattis vestibulum. In vel diam eget nisi.
</td>
</tr>
</table>
</center>
</table>
</body>
</html> | |
|
Alex XIV
Admin
Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007
| | Sujet: Le même... Mer 14 Fév 2007 - 11:37 | |
| Le même principe avec concaténation... - Citation :
- <html>
<head>
<title> CSS - Appliquer des css sur la page</title>
<!-- Ce script va nous permettre d'appliquer des styles css externes en appuyant sur un bouton-->
<link rel="stylesheet" type="text/css" href="st1.css">
<script language="javascript">
// La value renvoyée est appliquée en concaténation du mot .css pour appeler le fichier et l'appliquer sur la page.
function changer(nom){
document.styleSheets[0].href=nom+".css";
}
</script>
</head>
<body topmargin="60">
<center>
<form>
<!-- Value sera appliqué ci dessus dans la fonction changer -->
<input type="radio" value="st1" name="st" onclick="changer(this.value)">
<input type="radio" value="st2" name="st" onclick="changer(this.value)">
<input type="radio" value="st3" name="st" onclick="changer(this.value)"><br /><br />
</form>
<img src="im.jpg" width="200"><br/><br />
<table width="400">
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dolor. Nam in nunc non justo commodo sollicitudin. Mauris tincidunt aliquam lacus. Etiam sed neque. Fusce eros urna, tristique sed, sodales at, condimentum nec, ipsum. Quisque tincidunt. Sed leo massa, aliquam non, tempus sit amet, imperdiet nec, dui. Maecenas nunc. Sed vel augue non leo imperdiet hendrerit. Aliquam sit amet lacus quis pede mattis vestibulum. In vel diam eget nisi.
</td>
</tr>
</table>
</center>
</table>
</body>
</html> | |
|
Alex XIV
Admin
Nombre de messages : 236
Age : 48
Localisation : par GPS
Date d'inscription : 02/02/2007
| | Sujet: CSS Mer 14 Fév 2007 - 11:46 | |
| - Citation :
- <html>
<head>
<title>CSS - Couleurs de liens</title>
<!--Nous allons appliquer différents styles de css sur plusieurs liens sur une même page-->
<!--a correspond aux liens dans la page-->
<!--a:hover correspond aux liens survolés dans la page-->
<!--a.interne correspond aux liens appartenant à la class="couleurs2" ( voir dans les balises <a> ci dessous ) -->
<!--a:hover.interne correspond aux liens survolés appartenant à la classe "couleurs2"-->
<style type="text/css">
a
{
color:#05193c;
font-size:25;
texte-decoration:none;
}
a:hover
{
color:#ff9900;
text-decoration:underline overline;
}
a.couleurs2
{
color:#ff0000;
font-size:25;
texte-decoration:none;
}
a:hover.couleurs2
{
color:#00ff00;
texte-decoration:underline;
}
</style>
</head>
<body topmargin="100">
<center>
<a href="#" class="couleurs2">LIEN 1</a>
<a href="#" class="couleurs2">LIEN 2</a>
<a href="#" class="couleurs2">LIEN 3</a>
<p />
<a href="#">google</a>
<a href="#">yahoo</a>
</center>
</body>
</html> | |
|
