[RESOLU] Div pour bouton ?

Bonjour,

Je voulais savoir ce que vous feriez pour faire ceci :

2 petits carrés de couleurs différentes qui lorsque l'on clique dessus change le design du site.

En gros j'ai fait 2 div et avec du JQuery j'ai changé la feuille de style en fonction du clic sur l'un ou l'autre des 2 div. Avec un petit cookie pour sauvegarder le style préféré.

Ma question est la suivante :
Est ce juste d'utiliser des divs pour faire des boutons ?

Je n'ai pas jugé juste d'utiliser des balises <a> vu que ce ne sont pas des liens. Je n'ai pas mis de <input> car il ne s'agit pas réellement de boutons, enfin je ne le perçois pas comme tel (étant donnée que ça n'est pas dans un formulaire).

Alors est ce bien d'utiliser des div à cet effet ? (elles sont de couleur avec un background et une bordure et avec une taille prédéfinie mais ne contiennent rien)
Modifié par gorn (11 Oct 2011 - 14:24)

Salut. En un mot comme en cent : <button>.

Florian_R a écrit :
Salut. En un mot comme en cent : &lt;button&gt;.

ouais mais par exemple dans cet exemple (le point 5) : il utilise des liens : http://dmouronval.developpez.com/tutoriels/javascript/jquery/trucs-et-astuces-pour-jquery/

est-ce réellement incorrect ?
ça doit l'être au niveau du sens pour les robots j'imagine.

je vais le faire avec des buttons

Pour ceux que ça peut intéresser, voici les codes que ça me donne :
(ça n'est pas très optimisé vu qu'il faut ajouter pas mal de chose pour chaque skins différents, mais je pars du principe qu'un site ne doit pas proposer trop de skins différents, juste un ou 2 au cas où la couleur de base ne plaisent vraiment pas à tous les utilisateurs)

Le fichier css :

/* Changement de skins */

#style {
	float: left;
	width:16px;
	height: 16px;
	background-color: #ffffff;
	border: 1px solid #000000;
}

#style2 {
	float: left;
	width:16px;
	height: 16px;
	background-color: #000000;
	border: 1px solid #ffffff;
}

button::-moz-focus-inner { /* Enlève l'effet indésirable sur le focus des boutons */
	border:0;
}

Le fichier script.js (la fonction de changement) :

/* ================================ */
/* Changement de skins              */
/* ================================ */

	$("#style").click(function(){
		$("link[href='style-inactive.css']").attr("href","style.css");
		$("link[href='style2.css']").attr("href","style2-inactive.css");
		setCook2("skins","style.css",28);
	});
	$("#style2").click(function(){
		$("link[href='style.css']").attr("href","style-inactive.css");
		$("link[href='style2-inactive.css']").attr("href","style2.css");
		setCook2("skins","style2.css",28);
	});
	if(getCook("skins")=="style.css"){
		$("link[href='style-inactive.css']").attr("href","style.css");
		$("link[href='style2.css']").attr("href","style2-inactive.css");
	}
	if(getCook("skins")=="style2.css"){
		$("link[href='style.css']").attr("href","style-inactive.css");
		$("link[href='style2-inactive.css']").attr("href","style2.css");
	}

Le fichier script.js (la fonction de création et lecture des cookies) :

/* ============================================ */
/* Changement de skins : enregistrement cookie  */
/* ============================================ */

/* Enregistrer le résultat dans des cookies */
	function setCook2(nom,valeur,jours) {
        var expDate = new Date();
        expDate.setTime(expDate.getTime() + (jours * 24 * 3600 * 1000));
        document.cookie = nom + "=" + escape(valeur) + ";expires=" + expDate.toGMTString();
    }
	
	function getCook(nom) {
		deb = document.cookie.indexOf(nom + "=")
        if (deb >= 0) {
            deb += nom.length + 1
            fin = document.cookie.indexOf(";",deb)
            if (fin < 0) fin = document.cookie.length
				return unescape(document.cookie.substring(deb,fin))
            }
        return ""
    }

et le petit code dans la page index :

<h3>Changement de skins</h3>
			<div>
				<div>Activer la skin "classique" / Activer la skin "alternative"</div>
				<button id="style"></button>
				<button id="style2"></button>
				<div class="clear">&nbsp;</div>
			</div>

avec ça dans le header :

<link rel="stylesheet" media="screen" href="style.css" />
		<link rel="stylesheet" media="screen" href="style2.css" />

Modifié par gorn (11 Oct 2011 - 14:23)