Faux bouton en dhtml
Contenu du snippet
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 !
- 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.
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 / Exemple :
<!-- 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.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.