- ベストアンサー
マウスオンで同じ場所に画像表示
＊先ほどもHPの事で質問いたしました。 連続の質問ご了承ください。。 下のようなレイアウトで、上の各数字のところにマウスを持っていくと 「画像表示」の部分に画像が表示されるということを考えています。 例） １の上にマウスを置くと、画像表示欄に1.jpgが表示。 ２の上にマウスを置くと、画像表示欄に2.jpgが表示・・・・ という感覚です。 このような動作をさせることをJavascriptで可能でしょうか。 お手数ですが、お教えください。 ┌───────────────────────────┐ │ １ ２ ３ ４ ５ ６ ７ ８ ９ │ │ │ │ ┏━━━━━━━━━━━━━━━━┓ │ │ ┃ ┃ │ │ ┃ 画像表示欄 ┃ │ │ ┃ ┃ │ │ ┃ ┃ │ │ ┗━━━━━━━━━━━━━━━━┛ │ │ │ └───────────────────────────┘ ＊上の画像が質問内容作成画面ではきれいに見えるのに、質問するをおして、確認画面をみるとかなりずれてます・・・・。 これもなぜなのでしょうか？？ 固定ピッチフォントとプロポーショナルフォントの違い？？？ 見にくくてごめんなさい。。
- seapassion
- お礼率21% (62/287)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
■JavaScript if(document.images) { var imgs = new Array(); imgs[0] = new Image(); imgs[0].src = "0.gif"; imgs[1] = new Image(); imgs[1].src = "1.gif"; imgs[2] = new Image(); imgs[2].src = "2.gif"; } function ChangeImg(id, imgname) { if(document.images) { if(imgs[imgname]) { document.images[id].src = imgs[imgname].src; } else { document.images[id].src = imgname; } } } ■<BODY>～</BODY>内 <A HREF="#" onMouseOver="ChangeImg('VIEW', 1); onMouseOut="ChangeImg('VIEW',0);">１</A> <A HREF="#" onMouseOver="ChangeImg('VIEW', 1); onMouseOut="ChangeImg('VIEW',0);">２</A> <IMG SRC="0.gif" NAME="VIEW"> 最初に0.gifが表示されている場所に、核画像が表示されます。 マウスを離した場合は0.gifが表示されるので、それが必要ない場合は imgs[0] = new Image(); imgs[0].src = "0.gif"; と onMouseOut="ChangeImg('VIEW',0);" の部分を削除して下さい。 ＞＊上の画像が質問内容作成画面ではきれいに見えるのに、質問するをおして、確認画面をみるとかなりずれてま＞す・・・・。 不要なスペース等は削除されてしまいますからね。 もしseapassionさんがご自身のサイトで図形を綺麗に表示白ければ、<PRE>タグを使用すると良いと思いますよ。
その他の回答 (1)
- yellowocean
- ベストアンサー率60% (3/5)
横レスすみません。 下の方の書かれた JavaScript の性質について、すこしだけ… 画像のサイズのことです。 画像のサイズですが、 表示されている画像と入れ換える画像のサイズが異なる場合、 縦も横も、表示されている画像のサイズのままで、 入れ換えた画像が表示されてしまう場合があります。 自動的に大きさを修正してくれるのは IE 4 ～ 6, NN 6 だったと思います。 NN 7 は調べてかおらず、Opera は、少なくとも 6.03 では 大きさが修正されませんでした。 もし、IE 以外のブラウザも対象にしているなら かわりのプログラムも用意したほうがいいかとも思います。
関連するQ&A
- オンマウスで画像を表示〈フレーム版〉
すぐ下に質問されてる人と似ていますが、フレームバージョンではどうなのか、わからないので質問しました。 http://www.tagindex.com/javascript/link/change3.html フレームで上下に画面を分けて、上のリンク文字にマウスをあわせると、下の画面に画像を表示したいんです。 初心者なのであまりわからないんで。。。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の上にマウスが乗ったときに、指定した場所にテキストを表示させる方法！
画像の上にマウスが乗っている時に、指定した別の場所に、任意のテキストを表示したいのですが、このようなことができるJavaScriptはあるのでしょうか？ 例えば、写真集のようなものを作るときに、その写真の上にマウスを合わせると、決まったところに、その説明文がテキストで表示されるようにしたいのです。 もしあるようであれば、ぜひ教えてください。
- ベストアンサー
- JavaScript
- マウスオンで画面中央に別の画像を表示する方法
マウスが文字や画像の上にきた時（マウスオン）に、lightboxのように、画面の中央に別の画像を表示させるには、どうやればいいのか教えてください。 javaの関連記事を検索していますが、元の画像の位置が基準となっているものばかりです。 現在は、lightboxでしていますが、これは、クリックする必要があるので、マウスオンでやりたいと思っています。よろしくお願いします
- 締切済み
- JavaScript
- マウスオーバーイベントで画像表示
こんにちわ。 JavaScriptについて質問があります。 あるリンクの上にマウスを重ねると、テーブルのある場所にイメージを表示させることはJavaScriptで可能でしょうか？ やりたい事としては、リンク部分にマウスを重ねると、そのリンクの説明を記した画像をテーブル中に表示させたいと思ってます。 ネットを探しまくったのですが、参考になりそうなページが無かったので質問してみました。 参考になるページでも構いませんので、知っている方がいらっしゃったら宜しくお願いします。
- ベストアンサー
- JavaScript
- マウスオン画像が表示されない（不思議な現象）
お邪魔します。 gooブログ、シンプルのクリアブルーでカスタマイズ中です。 以前にマウスオンで表示させていた画像が トップを先頭固定にしてから変になったような気がします。（これが関係あるかどうか？） そこで新規投稿で、 <img src="http://blogimg.goo.ne.jp/user_image/10/e0/e766d1dd315072c684abf9b59b800b65.jpg"onmouseover="this.src='http://blogimg.goo.ne.jp/user_image/78/ec/ea118200fe07bc7f709c174ebfd20edc.jpg'"onmouseout="this.src='http://blogimg.goo.ne.jp/user_image/10/e0/e766d1dd315072c684abf9b59b800b65.jpg'">を貼り付けると 編集画面では上手く表示されているのに、投稿すると表示されていません。 編集画面に戻ると、タグが、<img>だけになっています。 いつもすみません よろしくお願い致します。
- ベストアンサー
- ブログ
- 画像の上に文字を表示
スタイルシートなどの方法で、画像の上に文字を表示させることは可能でしょうか。 <IMG SRC=1.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=2.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=3.jpg ALIGN=BOTTOM BORDER=0> <IMG SRC=4.jpg ALIGN=BOTTOM BORDER=0> ・・・と延々と並んでいる画像の上に重ねてそれぞれの画像のタイトルなどを表示できればうれしい。 ＃マウスをのせて表示は除外。
- ベストアンサー
- CSS
- 画像にマウスを重ねると大きな画像を表示したい
illustratorでスライスを作製し、画像を生成しました。 1000×1076のサイズで32個の画像で構成されるスライスになっています。 そのスライスの一部の画像にマウスオーバーするとスライス全体の 1000×1076と同じサイズの背景透明画像を上に表示したいのです。 よくあるボタンのマウスオーバーなどでやると元画像のまわりに画像がある想定ではないためか、マウスオーバーするとスライスが崩れてしまいます。 本来Flashなどでやるようなことと思いますが、 iPadでも見たいためCSSやJavascriptで実現したいと思います。 よろしくお願い致します。
- 締切済み
- CSS
- オンマウスで画像表示
オンマウスで画像表示(離すと非表示)というのをやりたいのですが 非表示の時も、オンマウス時に画像が表示されるべき領域に空白ができてしまいます。。 他のテキスト等のレイアウトを崩さずに オンマウス時だけ画像が上に被るような感じで 画面の一番手前に表示させるにはどうすればいいですか??
- 締切済み
- JavaScript
- 画像上のクリックした場所が分かるようにマーク表示
画像上をクリックした際、どこをクリックしたか分かるようにマークのようなものを画像の上に表示させたいと考えています。 マークはあくまで表示のみで、元の画像は加工しないようにしたいと考えています。 言語はＨＴＭＬとＪａｖａＳｃｒｉｐｔでお願いします。 お分かりの方、どうぞよろしくお願いします。
- 締切済み
- JavaScript
- javascriptで画像を表示する
javascriptで画像を表示した際に、表示したimgにCSSのidを付与したいのですが、以下のようにしても画像にidはつきませんでした。 document.write("<img src='images/image.jpg' id='example'>"); 一部の画像のみにスタイルを適用したいので、画像それぞれに異なるidを与えたいのですが、javascriptで表示させる場合のやり方がわかりませんでした。 どうやってidを割り当てるのか教えてください。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
補足
ありがとうございますっ！！ 今、ビルダーで試したのですが、、エラーがでてしまいます・・。 javascriptは <SCRIPT language="JavaScript"> <!-- ここにコピー --> </script> と、いう書き方で<head>～</head>内に書いていいんですよね？