Focntionnement des "alternate stylesheet"

Aujourd'hui je possède une feuille de style ou j'ai 2 type de bouton

.img_button_opaque {
  margin-left: 20px;
  opacity: 0.4;
  -moz-opacity:0.4;
  -khtml-opacity: 0.4;
  filter: alpha(opacity=40);
  cursor:pointer;
  cursor:hand;
}
.img_button {
  margin-left: 20px;
  cursor:pointer;
  cursor:hand;
}

Je genere 2 fois le bouton

<span id='opaque'>
  <img src="add.png" title="Création " alt="Création " class="img_button_opaque" />
</span>
<span id='visible'>
<img src="add.png" title="Création " alt="Création " class="img_button" />
</span>

Et par javascrip j'affiche soit l'un soit l'autre (flip/flop)

Je viens de découvrir les alternate stylesheet (grace au code de spip)

Afin de ne pas affiché 2 fois l'icone, je pourrais donc faire 2 feuilles de style avec les mêmes identificants.... Une appelé "opaque" et une autre appelé "visible" que j'actionnerais pas javascript.

Pourriez-vous me donner la marche à suivre ? des exemples ?

J'ai trouvé la réponse dasn le code de spip
Dans le HTML

<link rel="alternate stylesheet" type="text/css" href="img_pack/spip_style_invisible.css" title="invisible" >
<link rel="stylesheet" href="img_pack/spip_style_visible.css"  title="visible" >

et un javascript qui active l'un ou l'autre selon

function setActiveStyleSheet(title) {
	var i, a, main;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("style") != -1
		&& a.getAttribute("title")) {
			a.disabled = true;
			if(a.getAttribute("title") == title) a.disabled = false;
		}
	}
}

[/i]