マウスオーバーで画像の色を変えようとしているのですが、何故か1つ目の画像にしかリンクと動作が加わりません。他にもbxsliderなど入れていますが今は必要と思われるところだけ書いています。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/18 15:19
退会済みユーザー
2019/02/19 00:23
2019/02/19 00:26
2019/02/19 00:26
退会済みユーザー
2019/02/19 00:27
2019/02/19 00:35
2019/02/19 00:35
2019/02/19 00:55
2019/02/19 00:55
回答1件
0
結論
コードにファイル名を書く場合、ファイル名は手打ちではなく、ファイル自身からコピーしましょう。
非常に見づらいため(既に指摘があるとおり)
Eclipseのフォーマット機能で少し見やすくしました。
Html
1<html> 2 3<head> 4<title>Website</title> 5 6<style> 7#apDiv1 { 8 position: fixed; 9 width: 100%; 10 height: 75; 11 z-index: 1000; 12 top: 0; 13 left: 0; 14} 15 16</ 17head> <body> <style>a { 18 text-decoration: none; 19} 20</style> 21<div id=" apDiv1"> 22 23 24 <table width="100%" border="0" cellspacing="0" cellpadding="0" 25 align="center" bgcolor="#b4c0e0"> 26 <tr> 27 <td><a href="https://www.instagram.com/"> <img 28 src="image/instagram.gif" 29 onMouseOver="this.src='image/instagram2.gif'" 30 onMouseOut="this.src='image/instagram.gif'"> 31 </a></td> 32 <td><img src="image/square.gif"></td> 33 <td><a href="http://www.nikoand.jp/"> <img 34 src="image/favorite.gif" 35 onMouseOver="this.src='image/favorite2.gif'" 36 onMouseOut="this.src='image/favorites.gif'"> 37 </a></td> 38 <td><img src="image/square.gif"></td> 39 <td><a href="magazine.pdf"> <img src="image/mymaga.gif" 40 onMouseOver="this.src='image/mymaga2.gif'" 41 onMouseOut="this.src='image/mymaga.gif'"> 42 </a></td> 43 <td><img src="image/square.gif"></td> 44 <td><a href="mycm.mp4"> <img src="image/mycm.gif" 45 onMouseOver="this.src='image/mycm2.gif'" 46 onMouseOut="this.src='image/mycm.gif'"> 47 </a></td> 48 </tr> 49 </table> 50 51</div> 52<body style="overflow-x: hidden;"> 53 54</body> 55</html>
これでもかなり読みづらいです。
HTMLの構文守れているかどうかとか、headのstyle閉じてないとか無駄な改行とかとか。何もないのに空白入れていたりとか。
空白のせいで#apDiv1に対するCSSが全く効いてませんね。
また、HTML5で非推奨になった機能・廃止になった機能も盛り込まれていますので、かなり厄介な感じになっています。
※何を参考に組んだものかは知りませんが、HTML5以前の情報は余程のことがない限り忘れていいです。
HTML5以降でなくても、ブラウザに表示させる部分、文章部分は「bodyの中に書く」というのは基本的なところで、最初のほうから決まっている仕様ですし、複数bodyを書くとおかしくなります。
また、styleをHTMLの中に書くのは構わないのですが、書く場所が散らばると可読性が非常に悪いです。まとめましょう。
あとCSSでできることはなるべくCSSで書きましょう。
widthとかborderとかbgcolorとかなんとか、全部CSSで書けます。
今後同じ指定が増えたときに毎回おまじないのように書くのか?それともCSSで指定したclassとかタグ指定するだけで同じ挙動するようにするのか?
どちらが楽か(メンテナンス・改修していくことも含めて)は明らかですよね。
onMouseOver、onMouseOut 確かに大昔はそう書いていたかもしれませんが(ホームページビルダーとかではそういう機能ありましたね)
同じような挙動をするのであれば、JavaScriptに書いて変わる画像を変数として採用した方がスッキリします。
本題
何故か1つ目の画像にしかリンクと動作が加わりません。
いえ。
正しくコードに書かれた名前で画像・ファイルを準備すれば全て正しく動きます。
リンクについては画像とかpdfとかあるようなので、きちんとそのファイルを指定した名前で指定した場所に置くだけです。
favorite.gif favorites.gif favorite2.gif のように複数形のsが入る入らないの紛らわしい指定はありますが。(最初そこで私はとまどった)
本来は「用意した画像やファイル名をコードに書く」ので、上記太字に書いた「正しくコードに書かれた名前で画像・ファイルを準備すれば」というのは本来のやり方ではないですね。
ひとまず言い直します。
準備した画像・ファイルのパスを正しくコードに書いてください。
プログラムは指示したとおりにしか動きません。
aとAすら別物扱いです。スペルが違えば正しく情報が読み込めないのは当然ですね。
以下、蛇足ですが、私が最初に書いた指摘を踏まえて大幅に書き直しました。
※bxsliderとのことでコーディングの時間短縮のためjQuery採用しました
※favoritesで統一
html
1<!DOCTYPE html> 2<html> 3<head> 4<title> Website </title> 5<style> 6 body{ 7 overflow-x: hidden; 8 } 9 a { 10 text-decoration:none; 11 } 12 a img{ 13 border: none 14 } 15 table{ 16 width:100%; 17 border-collapse: collapse; 18 text-align:center; 19 } 20 table td{ 21 background-color:#b4c0e0; 22 margin:0; 23 padding:0; 24 } 25 #apDiv1{ 26 position: fixed; 27 width: 100%; 28 height: 75px; 29 z-index: 1000; 30 top: 0; 31 left: 0; 32 } 33</style> 34</head> 35<body> 36<div id="apDiv1"> 37 <table> 38 <tr> 39 <td> 40 <a href="https://www.instagram.com/"> 41 <img src="./image/instagram.gif" class="img_hover" data-img="instagram"> 42 </a> 43 </td> 44 <td> 45 <img src = "./image/square.gif"> 46 </td> 47 <td> 48 <a href="http://www.nikoand.jp/"> 49 <img src="./image/favorites.gif" class="img_hover" data-img="favorites"> 50 </a> 51 </td> 52 <td> 53 <img src="./image/square.gif"> 54 </td> 55 <td> 56 <a href="./magazine.pdf"> 57 <img src="./image/mymaga.gif" class="img_hover" data-img="mymaga"> 58 </a> 59 </td> 60 <td> 61 <img src="image/square.gif"> 62 </td> 63 <td> 64 <a href="./mycm.mp4"> 65 <img src="./image/mycm.gif" class="img_hover" data-img="mycm"> 66 </a> 67 </td> 68 </tr> 69 </table> 70</div> 71<script 72 src="https://code.jquery.com/jquery-3.3.1.min.js" 73 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 74 crossorigin="anonymous"></script> 75<script> 76$(function(){ 77 $("img.img_hover").on("mouseover",function(){ 78 const img_name = $(this).data("img"); 79 $(this).attr("src","./image/"+img_name+"2.gif"); 80 }); 81 $("img.img_hover").on("mouseout",function(){ 82 const img_name = $(this).data("img"); 83 $(this).attr("src","./image/"+img_name+".gif"); 84 }); 85}); 86</script> 87</body> 88</html>
投稿2019/02/19 00:54
編集2019/02/19 01:14総合スコア80765
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。