画像が変わりません；教えて下さい！

解決済

質問者：kiyuta
質問日時：2011/10/01 19:56
回答数：11件

質問させて頂きます。
お知恵をお貸し下さい。

ウェブサイトを作っていて、
「画像にオンマウスで別の画像を表示、クリックでリンク先に飛ぶ」
というのをやりたかったのです。

しかし、画像1は表示され、リンク先にも飛ぶのですが、
オンマウスしても画像2が表示されません；
何が原因でしょうか？
以下のようにしているのですが…

<a href="リンク先のURL">
<img src="img/画像1.gif" onmouseover="this.src='img/画像2.gif';
" onmouseout="this.src='img/画像1.gif';" border="0">
</a>

初心者なものですみません。
カテゴリ選択もここで良いのでしょうか…；

ご存知の方、どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (11件中11～11件)

No.11ベストアンサー

回答者： yui56544
回答日時：2011/10/02 11:08

あ、ローカル環境のJavascript制御を失念してました。

それはあるかも。
＃10さんの言うように、サーバーにUPすれば正常に動作するかもしれません。
ただ、文字コード制御のMETA構文が書かれていないので、文字化けするかも。

改行コードや文字コードの話は、ここ数年のブラウザではこれが原因で動かなくなるということはないので気にしないで大丈夫です。もっとも１つ1つのタグやスクリプトの中に改行が入ってしまうと動かなくなってしまう可能性はありますが。またＨＰ作成に関してはメモ帳でも問題はありませんが、メモ帳は少し機能的には不十分なので、もう少しＨＰ作成を本格的に進めようと思うようになったら、ほかのエディターに乗り換えた方がよいかもしれません（オススメのものは後述します）。

とりあえず、ルール的な話をしても一向に完成しないと思うので、質問者さんが書かれているソースを元に少し必要な情報を書き足したソースを書いてみました。これを以下のような手順で操作してみてください。
(1)メモ帳を新しく開く
(2)下のソースを全文貼り付ける（画像名のところは修正してください）
(3)「ファイル」→「名前をつけて保存」
(4)ファイル名を「test.html」（テストの部分は任意です）にし、ファイルの種類を「すべてのファイル」を選択、文字コードを「UTF-8」を選択して保存
(5)保存した場所にHTMLファイルができるので、これを開いてみる
たぶん、これでいけるかと、もしかしたらオンラインにUPしないと動かないかもしれませんが。
---------------↓ここの下から↓-----------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>タイトル名</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Style-Type" content="text/javascript">
<style type="text/css">
body {
background: src(img/背景画像の名前.gif) repeat;
}
</style>
</head>

<body>
<div align="center">
<br><br>
<a href="リンク先URL"><IMG src="img/画像1.gif" onMouseOver="this.src='img/画像2.gif'" onMouseOut="this.src='画像1.gif'" border="0"></a>
<br><br>
</div>
</body>
</html>

---------------↑ここの上まで↑-----------------

一応、補足というかアドバイスですが、HTMLには文字化け対策として最低限文字コードの制御構文は書いた方がよいです。
今回のようにUTF-8で保存したなら、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
と<head></head>の間に入れておきます。これで文字化けが防げるようになります

参考
http://www.htmq.com/html/meta.shtml

参考までに、私が比較的良いと思っている無料のHTMLエディタは以下のようなものがあります。
【メモ帳の拡張版的なエディタ】
へてむるクリエイタ～
http://hosiken.jp/dev/hetecre/
TeraPad
http://www.forest.impress.co.jp/lib/offc/documen …
サクラエディタ
http://sakura-editor.sourceforge.net/
※自分は「CresentEVE」というソフトを使ってますが、ちょっと上級者向けかも
http://www.kashim.com/eve/

【ワードを操作する感覚で簡単にHPが作れるWYSIWYGというシステムの作成ソフト】
※ただ、このWYSIWYGというシステムは、市販の製品も含めて実用レベルとは言いがたいので、できるだけ前者でタグを自分で打って作れるようになった方がよい
http://freesoft-100.com/review/alphaedit.php

この回答への補足

ここまで付き合って頂いて、
どうにもならないのならばもう仕方ありませんね。
サーバに公開したら…という可能性もあるようですし。
HTMLは私が思っていた以上に奥の深いものだったようです。
大変勉強になりました。

ご回答頂いた全ての方々に、心よりお礼申し上げます。

このような拙い質問に、
丁寧に何度も回答して下さったyui56544様を、
ベストアンサーにさせて頂きます。

ありがとうございました。

補足日時：2011/10/02 17:46

通報する

- 0
- 件

通報する

この回答へのお礼

何度もご回答して下さり、本当にありがとうございます。
書いて頂いたものをコピペして、画像のところを修正してやってみたのですが、
表示されないどころか壁紙(背景)まで表示されなくなってしまいました；
リンク先には飛べます。

ちなみに、今までも書いて頂いたような(1)～(5)のような手順で作っていました。
これで上手くいかないとなるとやはりサーバに公開すれば上手くいく…というものでしょうか？

リンク、貼って頂きありがとうございます。
参考に致します。

最悪画像1は表示され、リンク先にも飛べるので、妥協しようかと思っています。
他のページの画像やリンク、配置などにはトラブルはないようなので…

貴重なお時間を割き、このような拙い質問にご回答頂き、
本当にありがとうござました。