利用規約の変更について

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

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

しかし、画像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>

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

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

このQ&Aに関連する最新のQ&A

A 回答 (11件中1~10件)

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

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

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

とりあえず、ルール的な話をしても一向に完成しないと思うので、質問者さんが書かれているソースを元に少し必要な情報を書き足したソースを書いてみました。これを以下のような手順で操作してみてください。
(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
    • good
    • 0
この回答へのお礼

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

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

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

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

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

お礼日時:2011/10/02 17:15

いろいろ苦労されているようですね…。


もしや手元のパソコンで書いたHTMLをそのまま(パソコン上のファイルとして)開こうとしていませんか?
セキュリティのため、通常JavaScriptはローカル環境だと動作しないです。
(これも設定によって変わってきますが)
そんなわけで、サーバに公開してみたらさくっと動くかもしれませんよ。
    • good
    • 0
この回答へのお礼

ご回答感謝致します。
なるほど、そのような事もあるのですか。
貴重なご意見ありがとうございます。

お礼日時:2011/10/02 17:03

簡単なHTMLを習われたとのことですが、肝心要のHTMLの基本は抜けているようです。


ポインターを乗せる、あるいはクリックすることで画像を入れ替えることは、基本の次の次くらいの段階です。
 今必要なのは、きちんと最初から復習することです。「急がば回れ」
 でないと、また次の段階でわからなくなり、そこで応急処置をする。それを繰り返していっても結果的にへんなものしか出来なくて、基本からやり直しになります。どの段階で基本に戻るかと言うとできるだけ早いほうが良い。
 HTMLは、もともと人間がテキストエディタでマークアップするように作られています。世にオーサリングツールを呼ばれるツールが数ありますが、最初にそれを頼ると大事なところを身に着けないままになってしまいます。
 HTML4.01仕様書翻訳メンバーの内田さんがご家族(お子さん)のために作られたすばらしいページがあります。
★はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )

 それから始めましょう。

<html></html>内には<head></head>と<body></body>しか書けません。
<br>は連続して書くことはありません。位置調整の道具ではありません。段落内で強制的に改行するためのもので、通常のHTML内には登場することはありません。
<body</body>内にはブロック要素以外は直接書けません。ブロック要素とは前後が段落が分けられるもの

★ひとつ書いたら
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
 でチェックする。これでものすごく学べるはずです。

 ポインターの動作で画像を変更するには、現在はjavascripではなくCSSを使うほうが一般的です。というか、推奨です。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
高校時代の教科書を片手に頑張っております。
貼って頂いたリンクも参考にさせて頂きます。

どこからどこまでが基礎なのでしょう。
基礎の次の次…まず基礎の基準が解らぬ私です。すみません。

お礼日時:2011/10/02 17:01

>日本語は一切使用しておりません


なんと!?じゃあもうお手上げですね(笑)。

少なくともオンライン上で、こちらから出来る事は何もありません。後は「見えない理由」でそうなってる訳ですので。質問者さんが自力で何とかする以外、方法は無いです。こちらからはあなたのPCの中を見る事が出来ませんので…。

後、今さらで何ですけど…。この手のコンピュータ系の質問の時は、自己判断せずに必ず自分のPC環境を洗いざらい全て書いて置いた方が解決が早いです。
・OSの種類とバージョン
・ブラウザの種類とバージョン
最低限、これらの情報が無いと無駄足を食わされる事が多いので…。

それにHTMLコードなどの例文も、可能な限り本物に近い形で書いて置いて欲しいです。日本語使ってないのに、例文では使ってるとか反則です(笑)。おかげで無駄なやり取りが1回増えました(笑)。まあ、ちゃんと可能性の1個が潰せたから良いですけど。

いわゆる切り替えた後に表示させたい「画像2.gif」だけが表示しないって事なんですよね??

<img src="img/画像2.gif">

~って書いてちゃんと表示されますか?

とりあえず画像変更をどうしても再現したいのであれば。最初の例文に書いた通りのHTMLコードを丸々コピペして、UTF-8の改行LF、BOM無しで保存。後は該当するファイル(画像)のパスをそちらの環境に合わせて書き換えて貰えれば動く…はず?それでちゃんとならないのであれば、普通にPCかブラウザの方が壊れているのを疑った方が早いかもです。

しかし全くチンプンカンプンと言う事らしいので。そもそもそう言った状態で、いきなりJavaScriptを使ったあれこれを練習してみても、全く身に付かないし意味が無いんじゃないかなあ~とか老婆心で思ったりしますです。最初の質問文のHTMLも、全く構文がデタラメで滅茶苦茶だったので、こんな状態の理解では何を言っても通じてない様な不安もあります。

他には、その動いてない状態のHTMLと画像類などをフォルダごとまとめて、USBメモリとかに保存して。それを自宅以外の別のPCで動かしてみたら?他のPC環境で動き、自分のPC環境で動かない~と言う事であれば…答えは1つですよね。

学生さんですか?だったら週明けにでも、講師の先生に直に聞いた方が早いかも?とにかくこれ以上は、現物が無いと無理っぽいです。力になれず申し訳ない。


P.S.
>メモ帳
「できる」と言う事と「使った方が良い」というのは意味が違います。

・例:東京から北海道まで歩いて行くことができる。

前段で述べた通りの理由で、「メモ帳(notepad.exe)」はHTMLコード編集に必須の機能の最低条件を満たしていないので。特に見た目で「改行」や「半角空白と全角空白とタブの違い」を確認出来ないのが致命的です。これらは潜在的なバグとなり得るので。

知識人ぶった人達は「メモ帳で何でも出来る!(キリッ」とか言いますが。それは「弘法は筆を選ばず」の例えの様に、既に卓越した技術と知識を取得した人に限っての話であって。むしろ初心者ほど高価で良い道具を使い、技量不足を補助して貰うべきなのです。

もしもこの困難な事件にもめげず、またさらにweb技術の取得を志したいと思うのであれば…。まずは謹製のホームページ作成ソフトを使う事を強くお奨めします。それらソフトで作られたHTMLコードを、後からメモ帳などで開いて、どういう風な書き方をしたらどういう風に表示されるのかを、1つ1つ学んでいく事が大切です(この場合は見るだけなんでメモ帳でOK)。

最近はフリーでもかなり高性能なヤツが出回ってるんで、少なくともメモ帳使うよりは良いと思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
お手上げですか、了解しました。
拙い質問に貴重なお時間を割いて頂きありがとうございました。

もう回答なさらなくて結構ですが、
こちらに質問された内容はお答えします。

OSのバージョン:WindowsVista
ブラウザの種類:InternetExplorer8
こういった質問を、こういったサイトでする事に慣れていないもので、
至らぬ点が多々ありすみません。

画像2はちゃんと表示されます。
画像1と画像2を入れ替えてみたところ、画像2がちゃんと表示されました。

PCかブラウザ…壊れてないと思います。
他のPCでも表示されませんでした。

当方現在は大学生をしております。
授業でHTMLを学んだのは高校の時の事です。
現在は文系の学部にいますので、先生にパソコン持って質問に行くのはちょっと不可能です。
直接質問する時間があればもちろんそうしていますが、
そのまとまった時間が取れそうにないのでこちらで質問させて頂きました。

さらに、当方学業と両立して絵の仕事をしておりまして。
(自称ではなく、原稿依頼を受け、会社から原稿料を頂いております)
今回のサイト作りも、仕事の依頼を受け付けられるサイトをつくるという目的でした。
以前ここで、
「イラストサイトを作りたいと思うのだが、HP作成ソフトで作った方が良いでしょうか」
という質問をしたところ、
「ソフトではシンプルな物しか作れないため、イラストサイトを作るのならばメモ帳で作る方が良い。
実際にプロのイラストレーターは、メモ帳で済ましている事が多い」
との回答を頂きました。
その意見を参考にし、メモ帳で作っている次第であります。

日本語を例文で使っていて実際に使っていないのは反則です(笑)という件に関しては、
他の質問もこのように書かれていたので、コピペして貼った物を直していました。
画像のところには、絵のタイトルがローマ字で(短いものですが)入る為、
私が誰なのかばれないために変更したというのもあります。(用心のためです)
しかし「反則」だったとは知りませんでした。

構文がデタラメで滅茶苦茶とおっしゃっていますが、
具体的にはどこがでしょうか。ご回答の表現が抽象的かつ感情的でわかりづらいです。
ちなみにに、<br>の多用など直しましたが、やはり表示されませんでした。

とは言うわたくしの最初の回答も抽象的でしたので、
最初のご回答に補足を付けさせていただきました。
しかし、お手上げということですので、無理に回答して下さらなくて結構です。

なにはともあれご回答には感謝致します。
ありがとうございました。

お礼日時:2011/10/02 16:55

>どこをどうすればいいのやら~


いやはや、これは参りましたね…。三輪車でサーキットに飛び出す勇気がお有りなのなら、是非とも自転車の練習から始める事をお奨め致します!


まあ、冗談はさて置き。例文なのでそうなっているだけと思っていたのですが。前段のやり取りを見ると、もしかして!~と思いまして…。

・ファイル名にやフォルダ名に“日本語”が含まれいるとJavaScriptは動かない!

~と言う落ちじゃないですかね??

とりあえず、「画像2.gif」の名前を「sample-02.gif」とかに変更してみて下さい。多分、動くんじゃないかと…。で、出来れば「画像1.gif」の名前も「sample-01.gif」とかに変更した方が良いです。というかしなさい(笑)。

P.S.
JavaScriptは、
・文字コード:UTF-8
・改行:LF
・BOM符号:無し
~というのが前提に設計されてます。

ただし元々アバウトなプログラム言語なので、Windows環境ならShift-JISのLF+RFでも動く事は動くんですが。プログラム中に2バイト文字(日本語とか、様はアルファベット以外)が紛れ込むとエラーになり正常に動作しません。

まあ、外人が考えたんだから当たり前と言えば当たり前なんですが。これを機会に色々と勉強してみて下さい(ちなみにCSSも同じ法則です)。

さらに細かい事を言えば、Windows標準の『メモ帳(notepad.exe)』だと、HTMLや特にJavaScriptなどのプログラムを編集するには色々機能不足です。文字コードが自由に変更出来ないし、何より「改行コード」という概念が無いのが致命的!

JavaScriptやCSS内で日本語を使いたければ、文字コードを必ず「UTF-8(Unicode)」にして置く必要があります。メモ帳だと自動的に「文字コード:Shift-JIS、改行:LF+RF」で保存しますので、こういった問題が起きます。
    • good
    • 0
この回答へのお礼

ご回答感謝致します。

申し訳ない事に、ファイル名やフォルダ名に日本語は一切使用しておりません。

当方学校の授業などで簡単なものですが、
サイト作りを一応学んだ手探り初心者でございます。

メモ帳では不可能なのですか?
「メモ帳でできる」と書いてあるHTML講座を読んで使用したものなのですが…

お礼日時:2011/10/02 02:11

Javascriptも有効になっているとすると、設定の問題でもなさそうですね。


HTMLソフトが書き込み時に悪さしてるんだろうか…

ちょっとテスト。
下のページにアクセスしてみてください。
開くと、質問主さんのブラウザでJavascriptが正常に動作しているかが確認できます
http://kota-kota.net/file/other/js.html

「You can use JavaScript」 と表示されたら、Javascriptは正常に動作している
 →この場合はホームページの書き方に問題があるので、HTMLの書き方を変える。
  特にHP作成ソフトなどを使っている場合、余計な改行(←ちょっとコレが怪しい気はしている)やタグが混ざりこんでしまって正常に読み込めなくなってしまう場合もあるので、HTMLソースをメモ帳などで開いて、メモ帳でタグを貼り付ければおそらく動作するとは思う。

「You can’t use JavaScript」と表示されたら、Javascriptが正常に動作していない
 →ブラウザ(レジストリなども含む)に問題があるので、ブラウザを修復・再インストールなどを行う必要がある

下の「Javascriptが正常に動作していない」という状態であれば、使っているブラウザとバージョン、OSなどの情報があれば解決しやすいので補足して頂ければと思います。

この回答への補足

改行してやってみましたが、変化はありませんでした。
また、別のメモ帳を開いて上手くいかない設定だけを試してみましたが、
やはり上手くいきません;
本当、何が原因なのでしょう…

何回もご回答頂き、本当にありがとうございます。
そして申し訳ありません。

補足日時:2011/10/02 02:21
    • good
    • 0
この回答へのお礼

こんなに遅くまでお付き合い頂きありがとうございます。

リンクして頂いたページにアクセスしたところ、
「You can use JavaScript」と表示されました。
なので、HTMLの書き方の問題なのでしょうか。
HP制作はメモ帳で行っています。作成ソフトは使っていません。
余計な改行…、では改行をしないで一回やってみます。

お礼日時:2011/10/02 00:34

これで解決しないとなると、もしかしたらブラウザのJavascriptが無効になっているのかもしれませんね。


onmouseのようなJavascriptを使った技法は、ブラウザの設定でJavascriptが有効になっていないと動作しません。

ブラウザは何をお使いですか?
InternetExplorarであれば下記の設定を試してください

IE8の場合
http://support.biglobe.ne.jp/settei/browser/win- …
IE7の場合
http://support.biglobe.ne.jp/settei/browser/win- …
IE6の場合
http://support.biglobe.ne.jp/settei/browser/win- …

他のブラウザをご使用でしたら、
「ブラウザとバージョン名 javascriptを有効にする」
といった感じで検索すればやり方がでてきます
    • good
    • 0
この回答へのお礼

何度もご回答頂き感謝致します。

書いて頂いた方法を試してみましたが、
設定は最初から「有効」になっていました。
試しに一回「無効」にし、再度「有効」にしてみましたが、
結果は同じでした;

何度も答えて頂いているのにすみません。

お礼日時:2011/10/01 23:37

#3です。

訂正

<a href="リンク先URL"><IMG src="img/画像1.gif" onMouseOver="this.src='img/画像2.gif'" onMouseOut="this.src='画像1.gif'" border="0"></a>
    • good
    • 0
この回答へのお礼

ご回答感謝致します。

書いて頂いたものをコピペしてやってみたのですが、
結果は変わらず;
画像に問題があるのかと思い、
別画像でも試してみましたが同じでした。

本当、なにが原因なんでしょう…;

お礼日時:2011/10/01 22:25

もしかしたらセミコロン(;)が変な位置に入っているため?


ブラウザによっては反映されないかもしれないですね

これに書き換えるとどうですか?
<a href="リンク先URL"><IMG src="img/画像1.gif" onMouseOver="this.src='img/画像2.gif'" onMouseOut="this.src='画像1.gif'" border="0" ></a>


それと、補足にある<body>の前の<br>の連続行は明らかにおかしいので修正した方がよいです。
<br>は<body>内にないといけません
    • good
    • 0
この回答へのお礼

ご回答感謝致します。

セミコロンの位置ですね、わかりましたやってみます。
<br>は画像の位置調整に使っていたのですが、位置がおかしいのですね。
わかりました。<body>内に入れます。

お礼日時:2011/10/01 22:20

とりあえず、こう言う方法も有ります。



━ ココから ━━━━━━━━━━━━━━━━━━━━━━━━
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>TEST</title>
<style type="text/css"><!--

a.my_img,
a.my_img:link,
a.my_img:visited {
display: block;
border: none;
text-decoration: none;
width:200px; height:300px;
background-image: url('./sample-001.jpg');
}
a.my_img:hover {
background-image: url('./sample-002.jpg');
}

--></style>
</head>
<body>

<div><a href="./sample-002.html" class="my_img"></a></div>

</body>
</html>
━ ココまで ━━━━━━━━━━━━━━━━━━━━━━━━

~こんな感じで。何も大袈裟な事をする必要は無く。単にCSS(スタイルシート)の問題じゃないかと…?

仮に動的にHTMLを解釈させて、画像を切り替えるのにJavaScriptを使うにしても。最終的にはスタイルシート要素を弄る事になるので、原理的には全く同じ事です。直に <a href=""> 内に“onMouse~”を書き込むのは時代遅れというか、コードが煩雑になりメンテ性を著しく下げますので賛成出来ません。

この回答への補足

「どこをどうすればいいのやら」は抽象的な受け答えでしたね、
申し訳ありません。

では質問してもよろしいでしょうか。
2行目のリンクが貼ってある
"http://www.w3.org/TR/html4/loose.dtd">
とはなんでしょうか?ここにリンク先を入れるのですか?

my_imgとは画像の事ですよね、
ここが例で言う、画像1や画像2の場所になるのでしょうか?
それともこれはフォルダの名前ですか?

background-imageは壁紙のことですよね。
jpgではなくgif形式なので、そこは変更するとして、
sample-002が2回でてきますが、これは同じものですか?
片方は.htmlなので違うのだろうなとは思うのですが…

ごめんなさい、学校の授業&本で自己学習程度の初心者には、
回答者様のご回答は非常に解りづらかったです。

補足日時:2011/10/02 02:35
    • good
    • 0
この回答へのお礼

ご回答感謝致します。

わざわざ別の方法を書いて頂いたのですが、
なにうえ初心者なもので、コピペして、どこをどうすればいいのやらわかりません;
すみません。

お礼日時:2011/10/01 22:22

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング