JavaScript関数を記述して使用し、コンテンツをHTML要素に挿入することになっています。•次のステートメントを含むswapOutという名前の関数を作成します:document.imageFlip.src="最初の画像の名前"。•次のステートメントを含むswapBackという名前の関数を作成します:document.imageFlip.src="2番目の画像の名前"。•IDと名前がmyImageのdivタグを挿入します。
•divコンテナ内に、imageFlipというIDと名前の画像タグを挿入します。画像タグを初期化して、最初の画像を表示します。高さと幅の属性を設定します。alt属性とtitle属性を「Swappableimage」に設定します。alt="スワップ可能な画像"title="スワップ可能な画像"height= "" width = ""
•画像タグ内に、onmouseover = "swapOut()"およびonmouseout = "swapBack()"を追加します。これらは、画像要素が認識するイベントを定義します。1つ目は、画像の上にマウスを移動すると、swapOut関数を呼び出します。2つ目は、マウスを画像から離すと、swapBack関数を呼び出します。
これまで私はこれを行いました。私の.js形式で私は持っています
function swapOut() {
document.imageFlip.src = "firstImage"
}
function swapBack() {
document.imageFlip.src = "secondImage"
}
そして私の.htmフォームで私は持っています
<div id="myImage" name="myImage">
<img src="firstImage.png" alt="Swappable image" title="Swappable image" id="imageFlip"
name="imageFlip" onmouseout="swapBack()" onmouseover="swapOut()" height="200" width="200"/>
</div>
画像を交換する必要がありますが、最初の画像が表示されますが、その上にカーソルを合わせると、画像のないボックスしか表示されません。