マウスの出入り時に画像を切り替えるための onmouseover と onmouseout のいくつかの実装メソッド

この記事では、マウスを移動して画像を切り替えるための onmouseover と onmouseout の実装方法をいくつか紹介します。必要な方は参考にしていただければ幸いです。

マウスを前後に動かして画像を切り替えるのはよくあることなので、その実装方法について説明します。

最初の方法は、最も単純な方法でもあり、実装できます。 HTML

<img  class="img lazy"  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"    onmouseover="this.src=&#39;img/HBuilder.png&#39;" onmouseout="this.src=&#39;img/dongtai.png&#39;"/ alt="マウスの出入り時に画像を切り替えるための onmouseover と onmouseout のいくつかの実装メソッド" >

まずデフォルトの画像を設定し、次に移動する画像を記述します。

2つ目の方法、js置換

<img  src="/static/imghwm/default1.png"  data-src="img/dongtai.png"  class="lazy"  name="image1"  onmouseover="mouseOver()" onmouseout="mouseOut()" / alt="マウスの出入り時に画像を切り替えるための onmouseover と onmouseout のいくつかの実装メソッド" >

function mouseOver() {
	document.image1.src = "img/HBuilder.png"
}

function mouseOut() {
	document.image1.src = "img/dongtai.png"
}

画像を置換するメソッドをjsで記述し、htmlで呼び出します。

onmouseover と onmouseout を使用しない場合は、次のように記述することもできます。

<p class="bg"></p>

.bg{background: url(img/HBuilder.png) no-repeat;height: 300px;}
.bg:hover{background: url(img/dongtai.png) no-repeat;}

これら 3 つのメソッドは、マウスを画像の内外に移動する効果を実現できます。とても簡単です、試してみませんか？

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、JavaScript ビデオ チュートリアルをご覧ください。

関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

JavaScript グラフィック チュートリアル

#JavaScriptオンラインマニュアル

以上がマウスの出入り時に画像を切り替えるための onmouseover と onmouseout のいくつかの実装メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。