- ベストアンサー
画像が変わらない問題について教えてください！
yui56544の回答
あ、ローカル環境の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/document/txteditor/terapad.html サクラエディタ http://sakura-editor.sourceforge.net/ ※自分は「CresentEVE」というソフトを使ってますが、ちょっと上級者向けかも http://www.kashim.com/eve/ 【ワードを操作する感覚で簡単にHPが作れるWYSIWYGというシステムの作成ソフト】 ※ただ、このWYSIWYGというシステムは、市販の製品も含めて実用レベルとは言いがたいので、できるだけ前者でタグを自分で打って作れるようになった方がよい http://freesoft-100.com/review/alphaedit.php
関連するQ&A
- cssヘッダー画像の下に配置したい画像が重なります
css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>
- ベストアンサー
- HTML
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- 画像 表示について質問です。
画像 表示について質問です。 <?php echo '<a href="A.php"><img src="img/advance.gif" wwidth="80" height="80" style="border-style:none;" onmouseover="this.src="img/returen2.gif";" onmouseout="this.src="img/returen.gif";" /></a>'; ?> と考えたのですが、画像は表示されるもののONマウスの時に画像が変化しません。 どうしてなのでしょうか。
- ベストアンサー
- PHP
- 複数の画像を連動してロールオーバーさせたいのですが
宜しくお願い致します。 現在WEBショップを運営しているのですが、 「商品一覧ページ」から「商品詳細ページ」へリンクする画像が3つあり、 現在、それぞれの画像は個別にはロールオーバーするのですが、 3つの画像のどこにポインタを当てても、3つの画像全てが連動してロールオーバーするようにするにはどうすれば良いのでしょうか？ （3つの画像のリンク先は全て同じです） どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。 宜しくお願い致します。 <td><p><A href="リンク先(1)" ><img src="img/商品名_1.gif" alt="" onmouseover="this.src='img/商品名_2.gif'" onmouseout="this.src='img/商品名_1.gif'" width="133" height="28" /></A></p> <p><A href="リンク先(1)" ><img src="img/詳細ページ_1.gif" alt="" onmouseover="this.src='img/詳細ページ_2.gif'" onmouseout="this.src='img/詳細ページ_1.gif'" width="133" height="18" /></A></p>
- ベストアンサー
- HTML
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- 外部ファイルの記述の仕方
HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>
- ベストアンサー
- JavaScript
- cssファイルへリンクできないです。
今回からCSSファイルでホームページを作り出している超初心者なので、 専門用語の使い方など間違っているかも分かりませんが知恵を貸してください。 Dreamweaverを使用して、上部に固定ヘッダーのソースをhtmlファイル内に打ち込んで作業をしてます。ヘッダーの下部分の作業をし始めてDreamweaverのデザイン部分の画面で、ヘッダー画像の下に載せる画像や文字が入り込んで隠れてしまうので、作業がしにくいです。 そのため固定ヘッダーデータをcssファイルにした方がいいのかなと思い、 リンクさせようとしたのですが反映されないです。リンクした方がいいのか、その他より効率がいい方法があるのか分からないのでよろしく御願いいたします。 htmlファイルには <body> <link rel="stylesheet" type="text/css" href="banner.css"> と入力してます。 cssファイルには <div id="header"> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../house/img/b01-.gif" onmouseout="this.src='../house/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../house/img/b02-.gif'" onmouseout="this.src='../house/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../house/img/b03-.gif'" onmouseout="this.src='../house/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../house/img/b04-.gif'" onmouseout="this.src='../house/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../house/img/b05-.gif'" onmouseout="this.src='../house/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../house/img/b06-.gif'" onmouseout="this.src='../house/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../house/img/b07-.gif'" onmouseout="this.src='../house/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../house/img/b08-.gif'" onmouseout="this.src='../house/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../house/img/b09-.gif'" onmouseout="this.src='../house/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../house/img/b10-.gif'" onmouseout="this.src='../house/img/b10.gif'"> </div> と入力してます。 よろしく御願いいたします。
- ベストアンサー
- HTML
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、（４ヶ所とも）今度は何も表示されなくなってしまいました。 ＜問題のタグのひな形＞ <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします！
- ベストアンサー
- JavaScript
- スワップイメージとロールオーバーの組み合わせで…
上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか？？ javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> （中略） <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>
- ベストアンサー
- JavaScript
お礼
何度もご回答して下さり、本当にありがとうございます。 書いて頂いたものをコピペして、画像のところを修正してやってみたのですが、 表示されないどころか壁紙(背景)まで表示されなくなってしまいました； リンク先には飛べます。 ちなみに、今までも書いて頂いたような(1)～(5)のような手順で作っていました。 これで上手くいかないとなるとやはりサーバに公開すれば上手くいく…というものでしょうか？ リンク、貼って頂きありがとうございます。 参考に致します。 最悪画像1は表示され、リンク先にも飛べるので、妥協しようかと思っています。 他のページの画像やリンク、配置などにはトラブルはないようなので… 貴重なお時間を割き、このような拙い質問にご回答頂き、 本当にありがとうござました。
補足
ここまで付き合って頂いて、 どうにもならないのならばもう仕方ありませんね。 サーバに公開したら…という可能性もあるようですし。 HTMLは私が思っていた以上に奥の深いものだったようです。 大変勉強になりました。 ご回答頂いた全ての方々に、心よりお礼申し上げます。 このような拙い質問に、 丁寧に何度も回答して下さったyui56544様を、 ベストアンサーにさせて頂きます。 ありがとうございました。