Salut,
Je te la fais un peu puriste mais bon...
Vu que le bouton n'est actif que si JS est activé, il faut l'ajouter via JS, ce qui permet de ne pas avoir un bouton inactif pour certains utilisateurs. En fait, tu peux faire ainsi :
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">/*<![CDATA[*/
[#green].etat1
{
background-color: blue;
}
.etat2
{
background-color: red;
}[/#]
/*]]>*/</style>
<script type="text/javascript">//<![CDATA[
[#blue]var oO =
{
// Test de passage d'un argument
_Test:
function()
{
var iI = arguments.length - 1;
for(iI; iI >= 0; iI--) if(!arguments[iI]) return false;
return true;
},
// Ajout d'une action sur un événement
_Connect:
function(elm, evType, fn, useCapture)
{
if(elm.addEventListener) elm.addEventListener(evType, fn, useCapture);
else if(elm.attachEvent) elm.attachEvent('on' + evType, fn);
else elm['on' + evType] = fn;
},
// Annulation du click sur un élément
_CancelClick:
function(e)
{
if(window.event && window.event.cancelBubble && window.event.returnValue)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
}
},
// Changement de couleur
_Color:
function(elem, css1, css2)
{
var sClassCss = elem.className;
sClassCss = (sClassCss == css1) ? css2 : css1;
},
// Création, intégration et action du bouton
_Play:
function()
{
var oBody = document.getElementsByTagName('body')[0];
oBody.className = 'etat1';
var oBtn = document.createElement('a');
oBtn.setAttribute('href', '#');
var oTxtBtn = document.createTextNode('beau bouton');
oO._Connect(oBtn, 'click', function(e) { oO._Color(oBody, 'etat1', 'etat2'); oO._CancelClick(e); }, false);
oBtn.onclick = function() { return false; }; // Annulation du click pour Safari
oBtn.appendChild(oTxtBtn);
oBody.appendChild(oBtn);
}
}
oO._Test(document.getElementsByTagName, document.createElement, document.createTextNode) ?
oO._Connect(window, 'load', oO._Play, false) :
false;[/#]
//]]></script>
</head>
<body>
</body>
</html>
Ca semble un peu compliqué mais en gros...
La méthode oO._Test sert à tester les méthodes dont on se sert dans le script, ce qui permet de n'afficher le bouton que si le script fonctionne...
La méthode oO._Connect permet d'affecter une action sur un événement, ici load ou click.
Lorsqu'on fait un click, on empêche la propagation du click via la méthode oO._CancelClick. Vu que Safari bugue et transmet quand même le click, on ajoute une fonction qui empêche la propagation du click. -> function() { return false; }
La méthode oO._Color prend comme un argument un élément et deux classes CSS. Je définis les styles dans des classes afin de faciliter la gestion... (Si pour modifier ta mise en page, tu dois regarder dans le CSS et dans le JS, ça se corse
)
Enfin, la méthode oO._Play crée le bouton, affecte une classe au body et change la classe du body lorsqu'on clique sur le bouton...
Modifié par koala64 (24 Oct 2006 - 22:36)
), n'y at-til pas moyen de pondre quelque chose de plus compréhensible par ma modeste personne ? 
