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

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

3つの画像が使用されます：

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

javaScript関数は、画像の名前と新しいファイルパスを引数として取得し、画像ソースを動的に更新します。

<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>

タグのイベントハンドラー（

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

• ：

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

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

  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a> href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"、

  、
：
• ：

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

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

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

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