onmouseoverを使って画像を切り替えられない

閲覧いただきありがとうございます。
ご回答のほど宜しくお願いします。

前提・実現したいこと

HTML,CSS,JSを用いて、画像にホバーしたら別の画像に切り替わるようにしたいと思っています。
HTMLはwrapper構造を用いて3つの画像が横並びになるようにしています。
それぞれの画像 img_a_off img_b_off img_c_off について、ホバーしたときにimg_a_on img_b_on img_c_on に切り替わるようにしたいです。

発生している問題・エラーメッセージ

プレビューしたところ、ホバーしようとすると画像が表示されません(alt属性に入力した文字が出てきます)。コンソールのエラーにはnet::ERR_FILE_NOT_FOUNDと書かれています。HTML,JS双方のsrc属性に入力した画像のパスは正しいです。

該当のソースコード

HTML
1<div class="wrapper">
2    <a href="#"><img id="top_a" src="img_a_off.png" class="item" onmouseover="mouseon1();" onmouseout="mouseoff1();" alt="画像Aを表示"></a>
3    <a href="#"><img id="top_b" src="img_b_off.png" class="item" onmouseover="mouseon2();" onmouseout="mouseoff2();" alt="画像Bを表示"></a>
4    <a href="#"><img id="top_c" src="img_c_off.png" class="item" onmouseover="mouseon3();" onmouseout="mouseoff3();" alt="画像Cを表示"></a>
5</div>

CSS
1.wrapper {
2    overflow: hidden;
3    width: 100%;
4}
5.item {
6    float: left;
7    padding: 30px 30px 40px 50px;
8    width: 25%;
9}

JavaScript
1function mouseon1() {
2    var obj1 = document.getElementById("top_a");
3    obj1.src = "img_a_on.png";
4}
5function mouseon2() {
6    var obj2 = document.getElementById("top_b");
7    obj2.src = "img_b_on.png";
8}
9function mouseon3() {
10    var obj3 = document.getElementById("top_c");
11    obj3.src = "img_c_on.png";
12}
13
14function mouseoff1() {
15    var obj1 = document.getElementById("top_a");
16    obj1.src = "img_a_off.png";
17}
18function mouseoff2() {    
19    var obj2 = document.getElementById("top_b");
20    obj2.src = "img_b_off.png";
21}
22function mouseoff3() {
23    var obj3 = document.getElementById("top_c");
24    obj3.src = "img_c_off.png";
25}

試したこと

●ゆっくりホバーさせてみると、どうやらwrapper構造全体もしくはmarginの範囲で画像が表示されなくなることが分かりました。

●img_aにホバーしようとすると、同時にimg_b, img_cも画像が表示されなくなります。
最初は funciton mouseonX()を、数字で分けず3つ全てくくっていましたが、バラバラにしました。

●ホバーから解除(mouseout)しても画像は表示されないままです。

........................
足りない情報があれば教えてください。よろしくお願いいたします！

m.ts10806

2019/08/29 06:21

mouseoverくらいでしたらCSSだけで実装可能ですが、そうしないのは何かべつの処理を入れる予定があるとか、何かの課題ですか？

dit.

2019/08/29 06:41

動きそうな気がしますが… 画像のパスが、JavaScriptから見たパスになっていないことが原因のように思います。 JSを別ファイルで読み込んでるなどで、画像とJSの階層が違うのではないでしょうか。

m.ts10806

2019/08/29 06:53

dit.さん >画像のパスが、JavaScriptから見たパスになっていないことが原因 base64とかでJavaScriptから読み込ませるわけでもなくsrcを切り替えているだけなのでHTMLから見たパスでないといけないと思います。

cjaue.34

2019/08/29 07:10

JavaScriptの練習として使える知識を増やしておきたいと思ってやっています。無理そうならCSSでやってみます…！

m.ts10806

2019/08/29 07:11

st.さん既に回答していますしdit.さんも仰っていますが、画像が正しく準備されているなら問題が起きません。

dit.

2019/08/29 07:29

m.ts10806さん失礼しました。浅はかな知識で突っ込むべきではないですね。ちゃんと検証して来ました。HTMLから見たパスが正しいです。

行動規範の内容に同意します

回答2件

ベストアンサー

提示のコードではちゃんと動いているように見えます。
ALTが出るということは画像パスが間違ってるんじゃないかなぁとは思います。

とりあえず同じ処理が並んでるので引数によってon・offそれぞれ1つにまとめてみました。

html
1<div class="wrapper">
2    <a href="#"><img id="top_a" src="img_a_off.png" class="item" onmouseover="mouseon('a');" onmouseout="mouseoff('a');" alt="画像Aを表示"></a>
3    <a href="#"><img id="top_b" src="img_b_off.png" class="item" onmouseover="mouseon('b');" onmouseout="mouseoff('b');" alt="画像Bを表示"></a>
4    <a href="#"><img id="top_c" src="img_c_off.png" class="item" onmouseover="mouseon('c');" onmouseout="mouseoff('c');" alt="画像Cを表示"></a>
5</div>
6<script>
7function mouseon(name) {
8    let obj = document.getElementById("top_"+name);
9    obj.src = "img_"+name+"_on.png";
10}
11function mouseoff(name) {
12    let obj = document.getElementById("top_"+name);
13    obj.src = "img_"+name+"_off.png";
14}
15</script>

もう1つ引数入れれば関数も1つにできますね。

html
1<div class="wrapper">
2    <a href="#"><img id="top_a" src="img_a_off.png" class="item" onmouseover="mouseToggle('on','a');" onmouseout="mouseToggle('off','a');" alt="画像Aを表示"></a>
3    <a href="#"><img id="top_b" src="img_b_off.png" class="item" onmouseover="mouseToggle('on','b');" onmouseout="mouseToggle('off','b');" alt="画像Bを表示"></a>
4    <a href="#"><img id="top_c" src="img_c_off.png" class="item" onmouseover="mouseToggle('on','c');" onmouseout="mouseToggle('off','c');" alt="画像Cを表示"></a>
5</div>
6<script>
7function mouseToggle(onoff,name) {
8    let obj = document.getElementById("top_"+name);
9    obj.src = "img_"+name+"_"+onoff+".png";
10}
11</script>