Bouton image pour applications pros, techniques et outils

Pour créer une application professionnelle, on se doit de remplacer les boutons HTML par quelque chose de plus attractif. Quelles ressources le standard HTML propose-t-il?
Voici trois techniques simples à mettre en oeuvre, utilisant des images que l'on peut télécharger ou réaliser avec un logiciel d'édition (plusieurs liens sont fournis en annexe).
Elles conviennent pour trois fonctions respectivement:

  1. Bouton pour envoyer un formulaire.
  2. Pour exécuter un script.
  3. Pour charger une autre page.

Utiliser l'élément input type='button'

Le bouton image HTML est un bouton de soumission de formulaire, il envoie les données mais on peut utiliser différentes techniques pour réaliser des boutons images sans contraintes.

Si on veut utiliser cet élément autrement que pour envoyer un formulaire, on le place à l'extérieur des balises <form></form>.

Exemple:


Code source:

<input type="image" src="image/scriptol-light.png" name="Submit" value="Envoyer" 
    onMouseOver="this.src='image/scriptol-dark.png'" 
    onMouseOut="this.src='image/scriptol-light.png'" 
    onMouseDown="this.src='image/scriptol-down.png'" 
    onClick="clickit(this);"
>

Code JavaScript de la démonstration:

function clickit(element)
{
  var x = document.getElementById("storage");
  x.innerHTML="<b>Cliqué!</b>";
  setTimeout(function() { x.innerHTML="";}, 2000);
}

Aucun code CSS n'est nécessaire.

Utiliser un élément button

Il est plus conforme à la norme d'utiliser un élément <button> mais sans l'attribut src, il faudra ajouter du code CSS pour afficher une image, laquelle sera placée comme image de fond.

Cet élément comporte un avantage, la possibilité d'afficher un texte au dessus de l'image ce qui permet d'utiliser une même image pour des boutons différents chacun affichant un libellé propre.

Démonstration:

Ces boutons viennent de la galerie Free Button, voir le lien en annexe.

Code source:

  <div class="buttonbar">
  <button type="image" class="button" onClick="clickhome(this)">Home</button>
  <button type="image" class="button" onClick="clickexit(this)">Exit</button>  
  </div>

Code CSS:

.button
{
  position:relative;
  background-image:url(image/cosmic-gel-light.gif);
  border:none;
  width:111px;
  height:32px;
  color:white;
}
.button:hover
{
  background-image:url(image/cosmic-gel-dark.gif);
}
.button:active
{
  top: 1px;
  left:1px; 
}
.buttonbar
{
  padding:4px;
  margin:2px;
}

Utiliser des balises <a>

Cela a les même avantages que l'élément button, et convient quand le bouton est destiné à charger une autre page.

Le technique utilisée est celle que met en oeuvre Free Web Button, dont le site est lié en annexe: une seule image contient les deux versions du bouton, l'image normale et l'image plus sombre qui sera affichée quand la souris passe sur le bouton. Une propriété de style décale l'image selon l'état du bouton, autrement dit selon le mouvement de la souris.

Démonstration:

Code source:

<div id="button-bioloide"><a  href="#"></a></div>

Code CSS:

#button-bioloide a
{
  display:block;
  width:116px;
  height:34px;
  background-image:url(image/button-bioloide.png);
} 
#button-bioloide a:hover
{
  background-position:left bottom;
}

En changeant l'alignement du fond avec la propriété background-position, on change l'image visible. La valeur left est la valeur par défaut et est inchangée, seule change la valeur bottom qui remplace la valeur par défaut top quand la souris passe sur le bouton.

Référence: Propriétés de l'élément bouton image

Propriété Fonction
name Nom utilisé pour passer les données de formulaire
src URL de l'image
height Hauteur de l'image
width Largeur de l'image
style Style personnel. Une feuille de style s'applique à tous les boutons images.
alt Texte correspondant à la fonction pour faciliter l'accessibilité.

Attributs obsolètes:

Outils et images

Vous pouvez aussi créer un bouton avec la balise canvas ou avec SVG. Mais si vous préférez utilisez des éléments prédéfinis, plusieurs sources peuvent les fournir: