Franc83

Script OverBouton

Des div réactifs comme des boutons

Ce script prend des éléments div et change leur état quand vous passez la souris dessus, ou cliquez dedans, comme des boutons

Tout ce qu'il y a à faire est de créer des div, trois feuilles de styles différentes, et lancer un javascript pour chaque "class"de Bouton.

L'exemple à gauche est une série de div :
<div class="button" hoverbuttons="yes"><font face="Verdana, Arial, Helvetica, sans-serif">Exemple 1</font></div>

Ils passsent d'un état à un autre comme de vrais boutons grâce à la feuille de style sélectionnée et au javascript activé ou non.

Ci dessus, un autre exemple : les lettres ne descendent pas lorsque vous pressez le bouton ou div.

Remarquez la dernière rangée qui ne réagit pas, même s'il elle ressemble aux lignes supérieures ? Explications plus bas.....

Télécharger le javascript ici :

Fonctionnement des différents boutons :

- D'abord déclarer trois feuilles de styles différentes qui décriront comment les div réagiront à "mouseover", "onmouseout", and "pressed". Elles seront déclarées dans le header de votre page html. Les noms de classes doivent être définies de façon précise. La classe "button" pour votre div sera la classe par défaut. Nommez les deux autres classe avec un suffixe "hover" et"press".

Les noms de classes ci-dessous utilisent le nom de classe par défaut "test".

Remarquez que les deux classe au suffixe "hover" et "press" sont issues de la classe racine "button"

- Vous construisez ensuite un ou plusieurs éléments div et vous leur assignez une classe de feuille de style comme :

L'attribut hoverBoutons="yes" est celui qui dit au javascript quel effet appliquer au div. Si vous ne mettez pas cet attribut, alors le script ne va pas s'effectuer et considérer ce div comme un div régulier, même s'il a le même non de classe. C'est pourquoi la troisième ligne de "bouton" du div bleu n'est pas active alors que la classe des div est la classe "bouton".

Copiez et collez ce tag tout en bas de votre page, juste avant le tag </BODY>.

<script language="javascript" src="hoverBoutons.js"></script>

Ceci afin que le script trouve tous les div avec l'appel hoverBoutons. S'il est placé avant, il risque de ne pas trouver tous les div concernés par l'appel au script.

C'est tout ! Voici un div qui correspond à la mise en forme des feuilles de style et du script :

Commenter cet article

Commenter
Les messages comportant des attaques verbales contre les personnes seront supprimés. Vous pouvez renouveler le code de sécurité en appliquant un rafraîchissement à votre navigateur. Appliquer cette méthode de rafraîchissement si vous avez entré un mauvais code de sécurité.
Nom
E-mail
Site web
Titre
BBCode:
Commentaire
Code:*
	Je désire être prévenu par mail des commentaires qui suivront

Powered by AkoComment Tweaked Special Edition v.1.4.6
AkoComment © Copyright 2004 by Arthur Konze - www.mamboportal.com
All right reserved