質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

593閲覧

マウスオーバーが上手く作動しません

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

1クリップ

投稿2019/02/18 14:32

編集2022/01/12 10:55

マウスオーバーで画像の色を変えようとしているのですが、何故か1つ目の画像にしかリンクと動作が加わりません。他にもbxsliderなど入れていますが今は必要と思われるところだけ書いています。

bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mather

2019/02/18 15:10

やたら空白文字や改行があってstyleの閉じタグがなかったりするのですが、必要なところを抜き出すにしても最低限整形して問題が再現可能なコードを使って質問してください。
cerfweb

2019/02/18 15:19

bodyタグも2つあります。
退会済みユーザー

退会済みユーザー

2019/02/19 00:23

すみません。直しました。
azuapricot

2019/02/19 00:26

・・・コードが汚すぎてみるに堪えないのでまずはインデントやstyleを記載する場所のお勉強からはじめたほうがよいのでは・・・・
azuapricot

2019/02/19 00:26

(ここまで汚いと悲しくなってきますね)
退会済みユーザー

退会済みユーザー

2019/02/19 00:27

ごめんなさい。学校の課題で作っていて何もわからない状況です。すみませんでした。
azuapricot

2019/02/19 00:35

す~ぐ退会する・・・何もわからない状況なら逃げ出すんじゃなくて努力しなきゃ~・・・。 すぐ逃げ出すから何もわからないままなんですよ。
azuapricot

2019/02/19 00:35

せっかくインデント修正したコード載せて回答しようと思ってましたが質問者さんが逃げ出すならもういいですね。破棄します。
m.ts10806

2019/02/19 00:55

がんばってかいとうしたのに。。
m.ts10806

2019/02/19 00:55

ファイル名合わせれば問題起きてないという話だったんですけどね・・
guest

回答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
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問