• ベストアンサー

画像の表示につきまして

こんにちは。お世話になります。  画像の表示について伺いたいことがございます。  現在、HPを作成しています。そこには、横並びで三つの画像を配置しています。  しかし、そのHPをいつ開いても、表示されるのは一番左の画像のみで、真ん中と右の画像は表示されません。  ただし、マウスポインタを当てると、真ん中の画像も右の画像も表示されるようになり、以降は、画像が消えるような事はないのですが、その後、そのHPを閉じて、また開くと、同じように真ん中と右のみ表示されません。  インターネットオプションの「画像を表示する」にも、きちんとチェックが入っていますし、他のPCで開いても同様の結果になります。  こういう場合、どういった不具合が考えられるでしょうか。また、改善方法はありますでしょうか。  因みに、下記のようなタグを使っており、マウスオーバーすると画像が切り替わるようにしてあります。 <p class="img"><a href="http://●●●"><img width="235" height="120" onmousedown="this.src='http://●●●/img1.jpg'" onmouseout="this.src='http://●●●/img1.jpg'" onmouseover="this.src='http://●●●/img1_on.jpg'" alt="画像" src="this.src='http://●●●/img1.jpg'" / border="0"></a></p>  windowsXP IE6.0を使っております。  皆様、お忙しい中恐れ入りますが、ご教示下さい。宜しくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • os6v100i
  • ベストアンサー率44% (16/36)
回答No.1

>src="this.src='http://●●●/img1.jpg'" srcの指定が間違っているため、最初は画像が表示されないだけかと。

satoshi81
質問者

お礼

os6v100iさん  こんばんは。解決しました!! おっしゃるとおり、「>src="this.src='http://●●●/img1.jpg'"」 この部分を「>src="http://●●●/img1.jpg"」こうしたら、表示されるようになりました!!    お忙しい中ご教示いただきまして、本当にありがとうございます!

satoshi81
質問者

補足

os6v100iさん     ご返信ありがとうございます。 srcの指定が間違っているとのご指摘を頂き、下記のようにしてみました。  そうしましたところ、画像は、すぐに表示されるようになったのですが、マウスオーバーしたときに、別の画像に差し変わらないようになってしまいました。。。  色々と変更して試してみたのですが、上手くいきません。もう少しだと思うのですが(?)どこが悪いのでしょうか・・・。  すみませんが、お時間がある時にご教示頂けますでしょうか。 <p class="img"><a href="http://●●●"> <img width="235" height="120" border="0" src="http://●●●/img1.jpg" alt="画像" onmousedown="'http://●●●/img1.jpg'" onmouseover="'http://●●●/img1_on.jpg'" onmouseout="'http://●●●/img1.jpg'" / ></a></p>

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

マークアップの属性などの記述方法を確認しましょう。 終了タグ代わりの/もおかしくなってるし… <img width="235" height="120" border="0" src="http://~/img1.jpg" alt="画像" onmousedown="~" onmouseover="~" onmouseout="~" / >

satoshi81
質問者

補足

fujillinさん  ご教示くださいましてありがとうございます。 下記のように修正してみた。  画像は、すぐに表示されるようになったのですが、マウスオーバーしたときに、別の画像に差し変わらないようになってしまいました。。。  色々と変更して試してみたのですが、上手くいきません。もう少しだと思うのですが(?)どこが悪いのでしょうか・・・。  すみませんが、お時間がある時にご教示頂けますでしょうか。 <p class="img"><a href="http://●●●"> <img width="235" height="120" border="0" src="http://●●●/img1.jpg" alt="画像" onmousedown="'http://●●●/img1.jpg'" onmouseover="'http://●●●/img1_on.jpg'" onmouseout="'http://●●●/img1.jpg'" / ></a></p>  

関連するQ&A

  • オンマウスでの拡大画像の位置指定

    サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか?ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか?どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>

    • 締切済み
    • CSS
  • HTMLの組み合わせ

    ホームページ作成において 小さいサイズの画像にマウスを重ねると、大きいサイズの画像が出るようにしたのですが、大きいサイズが表示される時に、ブラウザのウィンドウ幅に合わせて最大サイズ表示したい場合、下記のソースを組み合わせれば可能でしょうか? <img src="小さいサイズ.jpg"onmouseover="this.src='大きいサイズ.jpg'"onmouseout="this.src='小さいサイズ.jpg'"> <p class="resizeimage"> <img src="大きいサイズ.jpg" alt="大きいサイズ"></p>

  • 画像 表示について質問です。

    画像 表示について質問です。 <?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
  • 【スマホ】画像ボタンを押したときに押した感を出す

    こんにちは。質問があります。 ボタンをCSSではなく画像で作成して、 押す前画像→押された画像→押す前画像→URLへ飛ぶ という表現をHTMLにて記述したいと思います。 ■例1 <a href="javascript:void(0);"><img alt="button" src="001.jpg" class="img" onmousedown="this.src='002.jpg';" onmouseup="this.src='001.jpg';"></a> ■例2 <img src="1.jpg" onmousedown="this.src='2.jpg'" onmouseup="this.src='1.jpg'" onmouseout="this.src='1.jpg'"> 上記のようにPC用設定は見つけたのですがこれをスマホで見ても ちゃんと動作してくれません。 スマホ用の記述を教えていただきたいです。 できればiPhone、Android両方で使える記述だとありがたいです。 よろしくお願いします。

  • ロールオーバーが表示されない

    ココログでブログを作成しています。 パソコン知識は低いですが、簡単なタグを親切に教えてくれるサイトを参考にがんばってカスタマイズしています。 以下の通りでロールオーバーが簡単にできるとのことでやってみましたがうまくいきません。 【参考にしたタグ】 <img src="★" border="0" onmouseover="this.src='●'" onmouseout="this.src='■'"> ★最初に表示される画像のファイル ●オンマウスで表示される画像のファイル ■マウスをはずしたとき表示される画像のファイル 【私が入力したタグ(??のところにココログのアドレスが入ります】 <IMG src="http://??.cocolog-nifty.com/images/★のファイル.gif" onmouseover="this.src='http://??.cocolog-nifty.com/images/●のファイル.gif'" onmouseout="this.src='http://??.cocolog-nifty.com/m/images/■のファイル.gif'"> 【トラブルの現象】 1)1枚だけ表示されマウスを持っていくと×印になり二度と表示されません。 2)HTMLの編集欄にタグを貼り付け保存→記事の作成で確認→htmlの編集欄に戻ると、タグの順番が逆になる(↓このようになる) <p><img onmouseover="this.src='●'" onmouseout="this.src='■'" src="★" border="0" /></p> うまく表示する方法がございましたら教えて頂けると助かります。 尚、他のサイトのロールオーバーは表示されております。

  • zoomについて質問です。

    zoomについて質問です。 http://www.ikko21.com/ このサイトの中段の画像に、マウスオーバーすると画像が大きく表示されます。 その「マウスオーバーで画像が大きく表示」をやってみたくて ソースを見てみると、 <td width="153" height="120" align="right" valign="middle"> <p class="zoom2"> <a href="#"> <img src="w2img/ww0217031636H21yokoshin.JPG" alt="◇土地貸(事業用定期借地)◇" width="146" border="0"> </a> </p> </td> となっていたので <p class="zoom2"><img src="イメージ"></p> とやると何も変化がなく、 <img src="イメージ" alt="サンプル" style="zoom: 200%;"> とやるともともとの画像が200%で表示されてしまいます。 色々試そうと思い、 <img alt="Sample" onmouseover="this.src='イメージ '; style='zoom: 200% ';" onmouseout="this.src='/イメージ'" src="イメージ" /> や <img alt="Sample" style='zoom: 200% ' onmouseover="this.src='イメージ ';" onmouseout="this.src='/イメージ'" src="イメージ" /> という風にやってみてもダメでした。 (HP制作の勉強を初めてまだ2週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません) どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。 よろしくお願いします。

    • ベストアンサー
    • Java
  • zoomについて質問です。

    zoomについて質問です。 http://www.ikko21.com/ このサイトの中段の画像に、マウスオーバーすると画像が大きく表示されます。 その「マウスオーバーで画像が大きく表示」をやってみたくて ソースを見てみると、 <td width="153" height="120" align="right" valign="middle"> <p class="zoom2"> <a href="#"> <img src="w2img/ww0217031636H21yokoshin.JPG" alt="◇土地貸(事業用定期借地)◇" width="146" border="0"> </a> </p> </td> となっていたので <p class="zoom2"><img src="イメージ"></p> とやると何も変化がなく、 <img src="イメージ" alt="サンプル" style="zoom: 200%;"> とやるともともとの画像が200%で表示されてしまいます。 色々試そうと思い、 <img alt="Sample" onmouseover="this.src='イメージ '; style='zoom: 200% ';" onmouseout="this.src='/イメージ'" src="イメージ" /> や <img alt="Sample" style='zoom: 200% ' onmouseover="this.src='イメージ ';" onmouseout="this.src='/イメージ'" src="イメージ" /> という風にやってみてもダメでした。 (HP制作の勉強を初めてまだ2週間ちょいのへっぽこなのでタグがおかしいかもしれません。勉強不足で申し訳ありません) どうやればマウスオーバーすると画像が大きく表示されるのでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 画像に触れると画像が変わるやつについて

    画像に触れると画像が変わるやつ (<IMG SRC="最初に表示される画像"   onMouseOver="this.src='触れると表示される画像'"   onMouseOut="this.src='最初に表示される画像と同じの'"> )の、 画像の大きさをWIDTH,HEIGHTなどで 指定することは出来ないのでしょうか?

    • ベストアンサー
    • CSS
  • 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法

    今HPを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"' border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか? もしくは他の方法あるでしょうか? ランダムに表示される画像は3枚と仮定し、 それぞれ3枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。

    • ベストアンサー
    • HTML
  • onmouseoverとoutで画像を切り替えられた・・・けど、何だろう青い枠線;

    お世話になります。 ビルダー11で作成中です。 onmouseover時とonmouseout時に画像を入れ替える処理を入れました。 参考サイトさんを利用して、以下のようなソースです。 <img src="画像.jpg" alt="がぞう" onmouseover="this .src=画像2.jpg';" onmouseout="this .src='画像.jpg';"> でも、上記ソースだと、プレビュー画面で画像の回りに青い枠線が 常時表示されるようになってしまいました(!) ビルダー内蔵のJavaScriptで_HpbImgSwap関数があって、 それを利用していたときはそんなことにはならなかったのですが・・・。 ちなみに、「じゃあ、そっち使えばいいじゃん」とおっしゃる意見も 出ると思うのですが、そちらを利用すると、なんかONMOUSEのときに、 画像が凹む?のです。 それはちょっと都合が悪い、ということで、上記ソースでできるならば、と思いました。 青い枠線を非表示にするには、どうしたらよいでしょうか? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ よろしくご教示ください。<(_ _)>

    • ベストアンサー
    • HTML