- ベストアンサー
fc2 オンマウスで画像を見せる方法は？
- オンマウスで2枚の画像を表示させたいですがうまくいかないので教えてください。
- 選んだ1枚の写真しか表示されない問題があります。
- どのようなプロセスと指定が必要か教えていただきたいです。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <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
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <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
- ロールオーバーが表示されない
ココログでブログを作成しています。 パソコン知識は低いですが、簡単なタグを親切に教えてくれるサイトを参考にがんばってカスタマイズしています。 以下の通りでロールオーバーが簡単にできるとのことでやってみましたがうまくいきません。 【参考にしたタグ】 <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枚だけ表示されマウスを持っていくと×印になり二度と表示されません。 ２）HTMLの編集欄にタグを貼り付け保存→記事の作成で確認→htmlの編集欄に戻ると、タグの順番が逆になる（↓このようになる） <p><img onmouseover="this.src='●'" onmouseout="this.src='■'" src="★" border="0" /></p> うまく表示する方法がございましたら教えて頂けると助かります。 尚、他のサイトのロールオーバーは表示されております。
- 締切済み
- ブログ
- 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
- オンマウスで画像を変えたいのですが...。
オンマウスで画像を変えたいのですが...。 onMouseover、outで画像を入れて簡易プレビューで見ると切り替わるのですが、 プレビュー(別)ウインドウで確認すると画像が切り替わりません。 因みにテンプレートはカスタムブルーを使っています。 何処に原因があるのか分りません。 教えて下さい。
- ベストアンサー
- ブログ
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ 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
- 画像が変わりません；教えて下さい！
質問させて頂きます。 お知恵をお貸し下さい。 ウェブサイトを作っていて、 「画像にオンマウスで別の画像を表示、クリックでリンク先に飛ぶ」 というのをやりたかったのです。 しかし、画像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> 初心者なものですみません。 カテゴリ選択もここで良いのでしょうか…； ご存知の方、どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- オンマウスで画像を別の場所に表示する
過去ログで似たようなのがあったのですが、 全然わからなかったので、質問しました。 文字オンマウスで、画像を別の場所に表示したいのですが・・ (java～を使わなくてもよいやり方が知りたいです。 java～は使ったことがない初心者ですので。) ちなみに、画像オンマウスで文字を別の場所に表示するのは、 ↓このやり方(html)でできたんですが・・・ <span ID="msg">ここに表示される</span> <a href="ページＵＲＬ"onMouseOver="msg.innerHTML='表示される文字'"onMouseOut="msg.innerHTML=''"><img src="画像ＵＲＬ" border="0"></a>
- ベストアンサー
- HTML
- オンマウスでクリック後の画像を変化させたままにする方法
たびたびお世話になります。 以前にも同じような質問をしたのですが・・ 状況が変わり、それとHP作成を進めて行くうちに色々解って来た事もあるので、もう一度質問させて下さい。 フレームで、上／左／右に区切っています。 上と左のフレームにメニューがあり、右のフレームにメインコンテンツがあります。 上のメニューも左のメニューもtarget属性のリンクで右フレームに 表示させるようにしたいと思っています。 まだページを作っているところなのでリンクは飛ばしてないですが。 メニューは文字ではなく、上も左も画像を作ってボタンにしました。 JAVAではなく、HTMLで、オンマウスにより画像を変化させるようにもしてあります。 それを、リンクを張り、クリックした後もオンマウスで変化したままの画像にしたいのです。リンク先を表示している間だけ、です。 タグはこうなっています。 <img alt="" src="image/MENU1.jpg" onmouseover="this.src='image/MENU1_1.jpg'" onmouseout="this.src='image/MENU1.jpg'" style="width: 119px; height: 33px;"> やり方はありますでしょうか？ それと、上のフレームからメニューをクリックした後、 左のフレームの中身も変化させる、というのはJAVAですか？ また、やり方はあるのでしょうか。 こんな風にやりたいのですが↓ http://www.dreampower-jp.com/index.html
- 締切済み
- HTML
- オンマウスで画像入換えするときに、マウスをのせる前に先に画像をダウンロードしておく方法
いつもお世話になります。 さて、今回の質問ですが、ある画像にマウスをのせたときに、その画像を別の画像に入れ換えるという技がありますよね。そこで、普通にタグを書くと <img src="マウスポインタが画像にのっていないときの画像" onmouseover="this.src='マウスポインタが画像にのっているときの画像" onmouseout="this.src='マウスポインタが画像から外れたときの画像'"> ですよね。 あるいはJavaScriptを使うと <A HREF="リンク先（http://～）" onMouseOver="スクリプト名.src='マウスポインタが画像にのっているのきの画像'" onMouseOut="スクリプト名.src='マウスポインタが画像にのっていないときの画像'"><IMG SRC="マウスポインタが画像にのっていないときの画像" NAME="スクリプト名" border="0"></A> と記載しますが、どちらの方法も、マウスポインタが画像にのってから入れ換える画像をダウンロードしてしまうと思うんですが、これだと回線が遅い方ではマウスポインタをのせてから画像が入れ替わるまで時差が発生してしまいます。そうならないように、はじめから入れ換え用の画像をダウンロードしておく方法はありませんか。 文章の構成が分かりにくて申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- HTML
お礼
早速のご返信、ありがとうございます。 アドバイスしていただいた通りに試してみたら…出来ましたヾ(*＾０＾*)ノ！ ＞imgとsrcの間に半角スペースがないからでは？ そうでした(;-_-) 半日かけて結局これが原因の一つだったとは・・・! パスについても、ポップアップになった時のurl?を貼ってＯＫです。 質問して良かった。。 的確なご指示に感謝いたします。がんばっていいブログを作りますね。 本当にありがとうございました！