この記事では、JavaScript を使用して、マウスを別の畫像要素の上に置いたときに div 要素の背景畫像を動的に変更する方法を紹介します。 `mouseover` イベントをリッスンし、現(xiàn)在ホバーされている畫像の `src` 屬性を取得することで、div の背景スタイルを簡単に更新して、インタラクティブなユーザー エクスペリエンスを実現(xiàn)できます。

実施原則

中心となるアイデアは、JavaScript のイベント リスニング メカニズムを使用して、畫像要素のマウスオーバー (マウスオーバー) およびマウスアウト (マウスアウト) イベントを監(jiān)視することです。 Mouseover イベントが発生すると、現(xiàn)在の畫像の src 屬性を取得し、それをターゲットの div 要素のbackgroundImage スタイルとして設定します。 Mouseout イベントが発生すると、div 要素の元の背景を復元したり、別のデフォルトの背景に設定したりできます。

HTML構造

まず、背景畫像を表示する div 要素と複數(shù)の img 要素を定義する必要があります。ユーザーはこれらの畫像にカーソルを置くと、div の背景を変更できます。

 <div id="イメージ">
    下の畫像にカーソルを置くと、ここに表示されます。
</div>

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon2.JPG" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

上記のコードでは、onmouseover 屬性と onmouseout 屬性を各 img 要素に追加し、それぞれ upDate(this) と unDo() JavaScript 関數(shù)をバインドしました。 this キーワードは、現(xiàn)在の img 要素をパラメータとして upDate 関數(shù)に渡します。

JavaScriptコード

次に、背景畫像を動的に更新するための JavaScript コードを記述する必要があります。

関數(shù) upDate(previewPic){
    document.getElementById("畫像").style.backgroundImage = `url('${previewPic.src}')`;
}

関數(shù) unDo() {
    document.getElementById("畫像").style.backgroundImage = "なし"; // 背景畫像を削除します document.getElementById("image").innerHTML = "ここに表示するには、下の畫像の上にカーソルを置きます。"; // デフォルトのテキストを復元します}

upDate 関數(shù)は、マウスが置かれている現(xiàn)在の img 要素を表す、previewPic パラメーターを受け取ります。プレビューPic.srcを使用して畫像のURLを取得し、それをIDが「image」のdiv要素のbackgroundImageスタイルとして設定します。 URL 文字列は、テンプレート リテラルを使用してより簡単に構築できます。

unDo 関數(shù)は、マウスが畫像の外に出たときの狀況を処理するために使用されます。ここでは、div のbackgroundImage を「none」に設定して背景畫像を削除し、div 內(nèi)のテキストを元の狀態(tài)に戻します。

完全なコード例

HTML と JavaScript コードを統(tǒng)合して、完全なサンプル コードを取得します。

 


<title>動的背景の変更</title>

＃畫像 {
    幅: 300ピクセル;
    高さ: 200ピクセル;
    境界線: 1 ピクセルの黒一色。
    テキスト整列: 中央;
    行の高さ: 200px;
}

.プレビュー {
    幅: 100ピクセル;
    高さ: 80ピクセル;
    マージン: 5px;
    カーソル: ポインタ;
}
スタイル>



<div id="イメージ">
    下の畫像にカーソルを置くと、ここに表示されます。
</div>

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon2.JPG" alt="" onmouseover="upDate(this)" onmouseout="unDo()">

<img class="preview lazy" src="/static/imghw/default1.png" data-src="bacon3.jpg" alt="" onmouseover="upDate(this)" onmouseout="unDo()">


関數(shù) upDate(previewPic){
    document.getElementById("畫像").style.backgroundImage = `url('${previewPic.src}')`;
    document.getElementById("畫像").innerHTML = ""; // デフォルトのテキストを削除}

関數(shù) unDo() {
    document.getElementById("畫像").style.backgroundImage = "なし"; // 背景畫像を削除します document.getElementById("image").innerHTML = "ここに表示するには、下の畫像の上にカーソルを置きます。"; // デフォルトのテキストを復元します}

以上がJavaScript を使用して、マウスを畫像の上に置いたときに Div の背景を動的に変更しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。