begin process at 2012 05 28 10:04:04
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > FAUX BOUTON EN DHTML

FAUX BOUTON EN DHTML


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Débutant Date de création :22/07/2002 Date de mise à jour :22/07/2002 21:32:11 Vu :8 770

Auteur : Dean

Ecrire un message privé
Commentaire sur cette source (0)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Cet exemple affiche un "faux" bouton qui possède le même comportement qu'un vrai ! (<input type="button" ... />)

Bien qu'il soit totalement inutile, ce script a l'interêt d'utiliser les évènements JS (onClick, onMouseDown, ...) pour changer les propriétés CSS de l'élément et reproduire les états des "vrais" boutons.

Regardez l'exemple, ce sera plus clair !

Source

  • <!-- la classe "button" à ajouter dans votre feuille de style -->
  • <style type="text/css">
  • .button {
  • background-color: ButtonFace;
  • border: outset 2px;
  • color: black;
  • cursor: default;
  • font: 14px MS Sans Serif;
  • padding: 2px 16px 2px 16px;
  • text-align: center;
  • text-decoration: none;
  • }
  • </style>
  • <!-- Le code pour un bouton -->
  • <span
  • class="button"
  • onClick="alert('Ceci est un faux bouton !')"
  • onMouseUp="this.style.borderStyle='outset'"
  • onMouseDown="this.style.borderStyle='inset'"
  • onMouseOut="this.style.borderStyle='outset'"
  • onSelectStart="return false"
  • >
  • Cliquez ici
  • </span>
<!-- la classe "button" à ajouter dans votre feuille de style -->
<style type="text/css">
.button {
	background-color: ButtonFace;
	border: outset 2px;
	color: black;
	cursor: default;
	font: 14px MS Sans Serif;
	padding: 2px 16px 2px 16px;
	text-align: center;
	text-decoration: none;
}
</style>

<!-- Le code pour un bouton -->
<span
class="button"
onClick="alert('Ceci est un faux bouton !')"
onMouseUp="this.style.borderStyle='outset'"
onMouseDown="this.style.borderStyle='inset'"
onMouseOut="this.style.borderStyle='outset'"
onSelectStart="return false"
>
Cliquez ici
</span>

 Conclusion

- les "faux boutons" sont compatibles avec Mozilla mais le résultat est meilleur sous IE (qui permet l'évènement onSelectStart);
- le design de l'exemple est celui de Win 9x mais on pourrait tout à fait imaginer faire des contrôles de type XP en utilisant les mêmes évènements agissant sur des images.


 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,499 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales