JavaScriptを使用してWindowsのようなボタンをシミュレートします

HTMLとJavaScriptを使用してカスタムグラフィックボタンを作成するのは驚くほど簡単です！このチュートリアルでは、画像スワッピングを使用して3つの異なる状態（UP、オーバー、ダウン）を使用してボタンを構築する方法を示しています。

（デフォルト）、ButtonSubmit.gif（マウスオーバー）、およびButtonSubmit-over.gif（マウスクリック）。 ButtonSubmit-down.gifコードは次のとおりです

<a href="//m.sbmmt.com/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>

、ReplaceImage()、<a></a>）は、ユーザーインタラクションに基づいて画像スワップをトリガーします。 画像自体はonmouseoverタグ内にネストされています。 アクセシビリティのためのonmousedown属性の追加に注意してください。onmouseout <a></a>alt説明：

• ：

  この関数は、新しい画像パスで識別された画像要素の属性を更新しますReplaceImage(sImgName, sImgFile)。 src sImgName sImgFile

  ：
これにより、ハイパーリンクが作成されます。
• は、新しいページへのナビゲーションを防ぎます

  <a href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a> href="//m.sbmmt.com/link/93ac0c50dd620dc7b88e5fe05c70e15b"、

  、
：
• ：

  これらのイベント属性は、マウスの状態に基づいて画像を変更するように呼び出します（ホバー、クリック、去る）。 onmouseover onmousedown onmouseout：ReplaceImage()これは画像を表示します。

• このアプローチは、ダイナミックな画像の変更を備えた視覚的に魅力的なボタンを作成し、多くのアプリケーションでボタンのルックアンドフィールを模倣します。

  、、および<img ... alt="JavaScriptを使用してWindowsのようなボタンをシミュレートします" >を画像ファイルへの実際のパスに置き換えることを忘れないでください。 最良の結果を得るには、一貫したサイズの画像を使用して、レイアウトシフトを防ぎます。

以上がJavaScriptを使用してWindowsのようなボタンをシミュレートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。