• 締切済み

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

ココログでブログを作成しています。 パソコン知識は低いですが、簡単なタグを親切に教えてくれるサイトを参考にがんばってカスタマイズしています。 以下の通りでロールオーバーが簡単にできるとのことでやってみましたがうまくいきません。 【参考にしたタグ】 <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> うまく表示する方法がございましたら教えて頂けると助かります。 尚、他のサイトのロールオーバーは表示されております。

  • beki
  • お礼率93% (15/16)

みんなの回答

  • rubyeye
  • ベストアンサー率47% (395/825)
回答No.2

#1です。 使用不可となっているのでしたら、画像をアップロードしたときに画像そのものが壊れてしまったか、画像ファイルだから拡張子がgifだと思っていて、本当はココログで対応していない画像ファイルの拡張子であるかぐらいしか思いつかないのですが、ためしに、使おうと思っているのとは、まったく別な画像をアップロードして、やってみてはいかがでしょう? それで、ちゃんと動くようでしたら、使用不可になっている画像を削除して、アップロードし直ししてみるか、パソコン本体に保存されている画像の更に大元画像があれば、それを再利用してアップロードするかくらいでしょうか。 恐らく、使用不可なのは、画像が壊れているのでは?と思います。

beki
質問者

お礼

再度のアドバイス、ほんとうにありがとうございました。 原因がわかりました。 画像のアドレスですが、2枚目のものは、1枚目のものをコピペし、最後の番号だけ変えていたのです。そのため表示されていないことがわかりました。 こういった失敗談もブログに載せておこうと思います。 ご親切に相談にのっていただき、ありがとうございました

  • rubyeye
  • ベストアンサー率47% (395/825)
回答No.1

×印は、画像が大きく回線速度がISDNとかダイヤルアップで遅いために、画像を読み込みきれなかった以外は、画像そのものが無いということです。 画像そのものが無いとなると、●と■の画像が無いということになりますので、画像がアップロードされているかどうかや、保存されているURLを確認して下さい。

beki
質問者

お礼

アドバイスをありがとうございました。 回線はマンションに設置されている光通信なので問題はないかと。 ご助言に従い、画像のサイズを3KBに落として再挑戦してみましたが同じ現象です。 最初と最後の画像を同じにしましたところ、オンマウスで×印が出て、マウスをはずすとまた画像が出ます。 プロパティーには、表示される画像にはファイル名が出ますが、×印のものは「使用不可」と表示されます どちらの画像も同じように保存しているのですが。。。

関連するQ&A

  • javascriptを使って画像のランダム表示とロールオーバーをセット

    javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1~5まで、ロールオーバー用の画像がa~eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら1に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。

  • ロールオーバーが上手くいかないのです。。

    JAVAなどを使わずに、マウスON/OFFで画像を変えるには 下記のタグ構成が一番簡単かと思ったのですが 実行すると最初に表示される画像だけが出て、 その画像の横に「×」(←画像が表示出来なかった時によく出るバッテンマーク)が 2つ出るだけで、ロールオーバーが出来ません。 色々なHTML関係のサイトを覗いてみましたが どうも上手くいきません。。。 もし下記のタグで間違いがなければ 私のパソコン(ブラウザ?)がおかしいのかも知れませんが^^; 初心者ですので基本的なことを見落としている可能性がありますが、 どうかアドバイス宜しくお願い致します。 -------------------------------------------- <html> <head> <title>タイトル</title> </head> <body> <IMG src="最初に表示される画像" border="0" onMouseOver="this.src='マウスを乗せた時表示される画像'" onMouseOut="this.src='マウスを離した時表示される画像'"> </body> </html> ----------------------------------------------- (追伸)よくロールオーバーのサンプルなんかを見ていると GIF形式ばかりなのですがJPGでも問題はないですよね?^^;

    • ベストアンサー
    • HTML
  • オンマウスで画像を変えたい。

    オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像1URl" onmouseover="this.src='画像2URl';" onmouseout="this.src='画像1URl';"> ------------------------------------------ や、 ------------------------------------------ <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
  • "戻る" と "ロールオーバー"

    前のページへ戻るボタンをつくりました。 ロールオーバーはできますが、前のページへ戻れません。 どこが悪いのかわかる方、回答お願いします。 <a href="javascript:history.back()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navi11','','images/form/1101.gif',1)"><img src="images/form/11.gif" alt="前のページへ戻ります。" name="navi11" width="190" height="26" border="0"></a>

  • mapでロールオーバー

    以下のようにmapでロールオーバーをしようとしたのですが、機能しません。 <div align="center"><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> <map name="map1"> <area href="taku.html" alt="" shape="rect" coords="766,0,996,69" onmouseover="this.src='images/mainleft1_on.png'" onmouseout="this.src='images/mainleft1.png'" src="images/mainleft1.png" alt="" border="0" /> <area href="taku2.html" alt="" shape="rect" coords="766,70,996,137" onmouseover="this.src='images/mainleft2_on.png'" onmouseout="this.src='images/mainleft2.png'" src="images/mainleft2.png" alt="" border="0"/></map> 全体の画像main.png の上にボタンmainleft1.png mainleft2.png がロールオーバーするようにしたいんですができないんでしょうか?

    • ベストアンサー
    • HTML
  • javaでロールオーバー設定で教えてください

    外部ファイルで同じ設定でロールオーバーを設定しているのですが ポイントを合わせると画像が動く(ボタンでよくある下にへこむような動作)ものと動かないものが出てきます。 ロールオーバー自体はできているのですがその動きの違いは何なのでしょうか? できれば全て動くようにしたいのですが… <外部ファイル> if (document.images) { var img1on = new Image(); img1on.src = "img/c2.png"; var img1off = new Image(); img1off.src = "img/c1.png"; } function On(name) { if (document.images) { document.images[name].src = eval(name + 'on.src'); } } function Off(name) { if (document.images) { document.images[name].src = eval(name + 'off.src'); } } <html> <p> <a href="home.html" onMouseOver="On('img1')" onMouseOut="Off('img1')"><img src="img/c1.png" alt="ホームへ" name="img1" border="0"></a> </p> これ以上のことはしていません。(全て統一でこのタグの 画像の名前やリンク先しかいじっていません。) 今貼り付けたものはへこむ動作はせずにロールオーバーのみが可能なものです。 誰か教えていただけませんでしょうか? またへこむような動作はどこで設定されているのでしょうか? 色々調べてはいるのですが初心者なもので分かりません… 宜しくお願い致します。

  • ロールオーバー画像の枠線を消したい

    初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <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> どうぞ宜しくお願いします!

  • スワップイメージとロールオーバーの組み合わせで…

    上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像を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"> ↑こんな感じで作っております<(_ _)>

  • クリックした自身の画像を別画像に入れ替えて表示

    前回質問したときに、解決したと思いましたが、動きがおかしいので 再質問します。 メニュー欄を画像にて表示し、画像クリックにて対象ページに飛ぶようになっています。 メニューをクリックした時、クリックした自身の画像を別画像に入れ替えて表示させようとしています。 onClick時に自分自身の画像を入れ替えし、リンク先が表示されるまで入れ替えた画像を表示したいのです。 下記のコードだと、クリック時、a_press.gif'は表示されず 何も表示されていない状態(背景画像)が見えてしまいます。 a_press.gif'<a href="http://www.yahoo.com/"> <img src="images/a_on.gif" onmouseover="this.src='images/a_rollover.gif';" onmouseout="this.src='images/a_on.gif';" onclick="this.src='images/a_press.gif'; this.onmouseover=null; this.onmouseout=null;"> </a> どなたかご教示いただけないでしょうか? よろしくお願いします。 IE,Firefox対応希望。

  • 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