Simuler un bouton de type Windows à l'aide de JavaScript

Créer des boutons graphiques personnalisés à l'aide de HTML et JavaScript est étonnamment simple! Ce tutoriel montre comment construire un bouton avec trois états distincts (haut, fin, vers le bas) en utilisant l'échange d'images.

Nous utiliserons trois images: ButtonSubmit.gif (par défaut), ButtonSubmit-over.gif (souris over) et ButtonSubmit-down.gif (clic de souris).

voici le code:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onmouseover="ReplaceImage('ImgSubmit', 'ButtonSubmit-over.gif')" onmousedown="ReplaceImage('ImgSubmit', 'ButtonSubmit-down.gif')" onmouseout="ReplaceImage('ImgSubmit', 'ButtonSubmit.gif')">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136519147164.gif" class="lazy" alt="Simulate a Windows-like Button Using JavaScript ">
</a>

La fonction ReplaceImage() javascript prend le nom de l'image et le nouveau chemin de fichier en tant qu'arguments, à la mise à jour dynamiquement de la source d'image. Les gestionnaires d'événements <a></a> TAG (onmouseover, onmousedown, onmouseout) déclenchent l'échange d'image en fonction de l'interaction utilisateur. L'image elle-même est imbriquée dans la balise <a></a>. Notez l'ajout d'un attribut alt pour l'accessibilité.

Explication:

• ReplaceImage(sImgName, sImgFile): Cette fonction met à jour l'attribut src de l'élément d'image identifié par sImgName avec le nouveau chemin d'image sImgFile.

• <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a>: Cela crée un hyperlien; Le href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" empêche la navigation vers une nouvelle page.

• onmouseover, onmousedown, onmouseout: Ces attributs d'événements appellent ReplaceImage() pour modifier l'image en fonction de l'état de la souris (planer, cliquez, congé).

• <img ... alt="Simuler un bouton de type Windows à l'aide de JavaScript" >: Cela affiche l'image, avec name="ImgSubmit" permettant à JavaScript de le référencer.

Cette approche crée un bouton visuellement attrayant avec des changements d'image dynamiques, imitant l'apparence des boutons dans de nombreuses applications. N'oubliez pas de remplacer "ButtonSubmit.gif", "ButtonSubmit-over.gif" et "ButtonSubmit-down.gif" par les chemins réels de vos fichiers d'image. Pour de meilleurs résultats, utilisez des images de taille cohérente pour éviter les changements de mise en page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!