- ベストアンサー
マウスオンで同じ場所に画像表示
＊先ほども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 以外のブラウザも対象にしているなら かわりのプログラムも用意したほうがいいかとも思います。
補足
ありがとうございますっ！！ 今、ビルダーで試したのですが、、エラーがでてしまいます・・。 javascriptは <SCRIPT language="JavaScript"> <!-- ここにコピー --> </script> と、いう書き方で<head>～</head>内に書いていいんですよね？