画像の切り替え＋イメージマップ

質問

下記のURLにあるようなhttp://www.openspc2.org/reibun/javascript/mouse/017/index.html

画像をJavaScriptで入れ替えて、それぞれの画像にイメージマップを作成するというものですが

これを使い、XHTML＋CSSにて書き込んだところ
クリック後の画像がfloatしてウィンドウサイズに合わせて動いてしまいます。（クリック前の初期状態の画像は問題なし）

スクロールやウィンドウサイズ変更でも動かなくするにはどうすればよいでしょうか？

そもそもこのJavaScriptでは
実現不可能でしょうか？

もしそうであれば
代案などをいただければと思います。

よろしくお願いいたします。

回答No.2

fujillin · ベストアンサー

#1です。
ご質問の意味を勘違いしてたかも…

＞スクロールやウィンドウサイズ変更でも動かなくするにはどうすればよい　でしょうか

スクロールはともかく、ウィンドウサイズを変更してもレイアウトが変わらないようにするのなら、レイアウトを固定してしまうしかないでしょう。
bodyにwidthを設定して幅を固定するなどしておいて、ページ全体のレイアウトが変わらないように指定してゆく方法です。

例えばこんなの
　http://www.css-designsample.com/csslayout/float-3column.html

お礼

ご回答の内容で解決できました
ありがとうございました。

回答No.1

fujillin

掲げられているサンプルのように「position:absolute;top:0px;left:0px」みたいな指定がしてあれば、画像は全部重なっているはずですけれど？

そうでない場合、visibilityを用いるとhiddenにしても非表示になるだけで、（特に指定がなければ）インライン要素としてレイアウトされるので、2番目、3番目の画像は右にずれたように見える可能性があります。

質問文からは不明ですが、position:absoluteの指定をはずしているのではないかと想像しますが？
position指定をするか、displayで制御するようにすれば良いのでは？