Besoin d'aide. Changer de styles css en cliquant sur un bouton?

Question

hugggo

7 Aug 2012 à 21:42

Bonjour à tous,

Nouveau et n'ayant aucune connaissant en javascript, je souhaiterai améliorer mon script.
Mon projet est de changer de styles css en cliquant sur un bouton [on/off].

Au 1er click le bouton passe sur ON

upload/45780-switch-on.png" alt="upload/45780-switch-on.png" /> et appliquerai un style CSS.

Au 2eme click le bouton repasse sur OFF

upload/45780-switch-off.png" alt="upload/45780-switch-off.png" /> (état initial) et applique un autre style CSS.

Le script pour l'instant change l'état du bouton "au click", passe de OFF à ON.

<script langage="JavaScript1.2">	
var tab_image = new Array(2);
for (var i=0; i< tab_image.length;i++)
        tab_image[i]= new Image();
tab_image[0].src='images/switch-off.png';
tab_image[1].src='images/switch-on.png';

var n=0;

function change() {
n= ++n;
if (n == tab_image.length) n=0;
window.document.image.src=tab_image[n].src;
}
</script>

<a href="javascript:change()"><img name="image" src="images/switch-off.png" border=0 alt="+ d'info"></a>

[/i]

Comment puis je faire pour faire le lien entre ce bout script et ce script Jquery stylesheets.
Merci d'avance

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-uk">
<head>
	<title>jquery styleswitcher - kelvinluck.com</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	
	<link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" />
	<link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" />
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script type="text/javascript" src="styleswitch.js"></script>
</head>

<body>
		Currently active stylesheet:
		<span id="st1">styles1</span>
		<span id="st2">styles2</span>
		<span id="st3">styles3</span>
	</p>
	<p>Choose a different stylesheet:</p>
	<ul>
		<li><a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch">styles1</a></li>
		<li><a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch">styles2</a></li>
		<li><a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch">styles3</a></li>
	</ul>
	
 http://www.kelvinluck.com/assets/jquery/styleswitch/
 

</body>
</html>

Modifié par hugggo (07 Aug 2012 - 22:37)

Sujet clos

Questions générales et questions de débutants

Besoin d'aide. Changer de styles css en cliquant sur un bouton?