Question

柏　満南

ヒントを見ても分からなかったのでJavaScriptできる方教えてください。
1月8日(土)の12時まで回答を受け付けます。

課題3. 犬の写真(上は dog_1.jpg, 下は dog_2.jpg)を縦に並べておく。
(1) 上の写真にマウスを重ねた(mouseenter)ときには,上の写真を cat_1.jpg に変更し、
下の写真にマウスを重ねた(mouseenter)ときには,下の写真を cat_2.jpg に変更する。
それぞれの写真から mouseleave したら元の犬の写真に戻す。以上の動作を行う
JavaScript を作成せよ、犬と猫の画像は,js_work\part03Ylecture2-4Ycat_dog にあ
るファイルをそのまま使うこと、他のフォルダに移動してはならない。hover を使って
も、使わなくてもよい。
この課題については,下の画面コピーーの青枠部分の HTML と jQuery を含む JavaScript
のプログラム,画面コピーを提出せよ。(20 点)
G ボタンをロールオーパーする
X
O ファイル || S/2021/Webページ作成応.
mouseenter, mouseleave
ボタンをロールオーバーする
マウスをどちらの
写真の上にも重ね
ていないとき
16
ロ

G ボタンをロールオーパーする
ロ
X
C A
O ファイル || S/2021/Webページ作成応
**キ
mouuseenter. mouseleave
ボタンをロールオーバーする
マウスを上の写真
の上に重ねたとき
G ボタンをロールオーバーする
O ファイル || S/2021/Webページ作成応
mouseente, mouseleave
ボタンをロールオーバーする
マウスを下の写真
の上に重ねたとき
【ヒント11 犬の画像を縦に並べるのは次の html で実現することができる.
<nav>
くul>
くli><a href="#"><img src="cat_dog/dog_1. jpg" title="白黒まだら犬”></a></li>
くli><a href="#"><img src="cat_dog/dog_2. jpg" title="茶色犬”></a></li>
く/ul>
17

く/nav>
【ヒント21 replace メソッドは,元の文字列内の任意の場所にある文字列を置き換える.
しかも,置き換え対象の文字列が複数ある場合には,それらすべてを置き換える.
cat_dog/dog_1.jpg 等には dog が2か所,cat_dog/cat_1.jpg 等には catが2か所現れること
に注意が必要である。
【ヒント3)この課題では,画像のみ置き換えており,ttle 属性は置き換えていない。この
ため,猫の上に,犬の title 属性が表示される。次の(2)で修正する。
白黒まだら大
茶色犬
(2)(1)を改造して,犬が表示されているときは dog_1.jpg と dog_2.jpg の title 属性をどち
らも”大,猫が表示されているときは cat_1.jpg と cat_2.jpg の title 属性をどちらも”猫
にせよ、なお,犬の上に mouseenter すると,猫の写真に入れ替わるので,犬の title 属
性を画面上に表示させて検証することはできない。また,変更する必要がない title 属
性を変更したり,冗長な処理を行ったりしないこと.(20 点)
18

プログラミング言語 javascript