画像の切り替え＋イメージマップ方法と問題の解決策
- JavaScriptを使用して画像を切り替え、それぞれの画像にイメージマップを作成する方法について問題があります。
- クリック後の画像がウィンドウサイズに合わせて動いてしまう問題があります。
- スクロールやウィンドウサイズ変更でも画像が動かないようにする解決策を知りたいです。
- ベストアンサー
画像の切り替え＋イメージマップ
下記のURLにあるようなhttp://www.openspc2.org/reibun/javascript/mouse/017/index.html 画像をJavaScriptで入れ替えて、それぞれの画像にイメージマップを作成するというものですが これを使い、XHTML＋CSSにて書き込んだところ クリック後の画像がfloatしてウィンドウサイズに合わせて動いてしまいます。（クリック前の初期状態の画像は問題なし） スクロールやウィンドウサイズ変更でも動かなくするにはどうすればよいでしょうか？ そもそもこのJavaScriptでは 実現不可能でしょうか？ もしそうであれば 代案などをいただければと思います。 よろしくお願いいたします。
- ugoton
- お礼率50% (2/4)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ご質問の意味を勘違いしてたかも… ＞スクロールやウィンドウサイズ変更でも動かなくするにはどうすればよい でしょうか スクロールはともかく、ウィンドウサイズを変更してもレイアウトが変わらないようにするのなら、レイアウトを固定してしまうしかないでしょう。 bodyにwidthを設定して幅を固定するなどしておいて、ページ全体のレイアウトが変わらないように指定してゆく方法です。 例えばこんなの http://www.css-designsample.com/csslayout/float-3column.html
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
掲げられているサンプルのように「position:absolute;top:0px;left:0px」みたいな指定がしてあれば、画像は全部重なっているはずですけれど？ そうでない場合、visibilityを用いるとhiddenにしても非表示になるだけで、（特に指定がなければ）インライン要素としてレイアウトされるので、2番目、3番目の画像は右にずれたように見える可能性があります。 質問文からは不明ですが、position:absoluteの指定をはずしているのではないかと想像しますが？ position指定をするか、displayで制御するようにすれば良いのでは？
関連するQ&A
- イメージマップでマウスオーバーするとポップアップ
いつもお世話になっております。 地図の画像をイメージマップにして、地図の各ポイントをマウスオーバーすると画像が横に出る というものを作りたいのですが、可能でしょうか？ 調べたのですが「イメージマップにマウスオーバーで説明文を出す」や 「リンクにマウスオーバーで画像を出す」というものしか見つかりませんでした。 javascriptオフにも対応するためCSSで実現できないかと考えているのですが方法を教えて頂けませんでしょうか？ 宜しくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- このページのように・・・したいのですが・・・
http://www.openspc2.org/reibun/javascript/mouse/062/code.html 上記のサンプルページのように、触れるとサウンド１クリックでサウンド２が鳴って、それと同時に触れると画像２が表示されるタグってありませんか？説明不足でしたら補足します。ちなみに、画像１はなにもしていない状態で表示されている画像です。
- ベストアンサー
- ホームページ作成ソフト
- javascriptで画像移動時に表示するマップ
webサイトで、大きな画像が枠に収まらない状態で、 マウスやスクロールバー等で画像の表示位置を変更する際に 表示する全体マップについてjavascriptでの実現方法を知りたいです。 どんな全体マップかといいますと 大きい画像の横隅に全体マップが表示されて、 大きいほうの画像の表示位置を変更すると、 全体マップの見えている部分を示すフィルターが移動する。 というような動作をjavascriptで考えております。 ２日ほどかけても、良いサンプルが見つかりませんでしたので、こちらで質問させていただいてます。 ちなみにイメージ画像を添付しておりますので、ご参考にしていただければと思います。
- ベストアンサー
- JavaScript
- イメージマップについて
複数の写真画像を1枚の画像にして、イメージマップで表示し、そのうちの一つの画像をクリックすると別ウィンドウで画像を開くということをしたいのですが、まず最初に複数の写真画像を1枚の画像にする方法がわかりません。画像処理ソフトは、PhotoShopElements2.0を使用しています。よろしくお願いします．
- ベストアンサー
- HTML
- image画像を画面サイズに合わせる
自作HPのトップページに、背景画像の代わりとしてimage画像を設定しているのですが、自分のパソコンで丁度いいサイズに設定しても、他のパソコンで見たら画像が大きいようでスクロールが出てきてしまいます。 どのパソコンでも対応できるように、自動的に各々のパソコンサイズに合うようにしたいのですが、そのようなCSS？JavaScript？ ・・・ありますでしょうか？ ちなみに、その画像は他に「更新すると違う画像に変わる」設定を施しています。
- 締切済み
- その他（プログラミング・開発）
- イメージマップをクリックしたら枠がでてしまいます。
<area shape="rect" coords="288,1,429,195" href="index.html" alt="ホーム"> このように画像にイメージマップでエリア設定したのですが、クリックするとイメージマップの枠がオレンジ色で表示されてしまいます。 CSSでborder:none;を適応させているんですが、枠が消えません。 普通の画像の枠は表示されません。イメージマップだけです。 どうしたら消えるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- HP作成でJavaScriptかCSSを使ってるのか良くわからないのですが・・・
ズーラシア動物園のマップなんですけど http://www.hama-zoo.org/zoorasia/guidance/map/map_org.html このサイトのような１のボタンを押したらゾウの画像のウインドウ？がでてくる。 このようなサイトを作りたいのですがどうやったら作れるのでしょうか、CSSやjavascriptなどでネットで探してみたのですがいまいちよくわかりません。 なにかわかりやすく紹介されているサイト、などこのボタンを押すとゾウの画像のウインドウが開くものの名前、これは一体どうやっているのでしょうか。 グーグルマップなどでも？マークを押すと画像がでてきたりするのでそれと似たようなものなのだなとはわかるのですが、どうかご指導のほどお願いします。
- 締切済み
- その他（ITシステム運用・管理）
- 画像の大きさに合わせて文字の大きさを変えたい
画像の上にテキストを置きたいのですが、以下の条件の場合にどのようにcssを書けばいいのかわからないので教えてください。 1. 画像サイズがウインドウの大きさに合わせて可変する 2. 画像の垂直中央にテキストを配置する 3. 画像の大きさに合わせて相対的にテキストのサイズも同様に可変する ネットでいろいろ検索したり書籍を見たのですがなかなかこういう場合の手法が探せませんでした。 1.の画像サイズをウインドウの大きさに合わせるのはわかりましたが、2.はテーブルを使わずにできないでしょうか？ また、3.は検討もつきませんでした。やはりjavascriptなどを使わないと実現できないでしょうか？ やりたいことはスマホ用サイトで、スマホを縦にしたり横にしたりした場合に、画像の大きさはウインドウ横幅に合わせて変えられるのですが、文字の大きさまで変えたり、中央に配置するのがわかりませんでした。 html5+css3です。お手数ですがよろしくお願い致します。
- 締切済み
- CSS
- クリッカブルマップを使わず同じ効果を得たい…。
出来るかも分からないのですが、宜しくお願いします。 題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。 そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか？ 実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。 なお、FlashはNGとさせてください。 どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- JavaScriptでの画像切替について。
以下のようなことをしたいのですが、方法が分からず困っています。 http://www.astellas.com/jp/ メニューの上にマウスがくると、下の画像が切り替わる。 http://www.mos.co.jp/index.html メニューの上にマウスがくると、プルダウンのメニューが表示される。 上の２つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。 JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。 上の２つを実現するのは、今は諦めたほうが良いでしょうか？ JavaScript以外でも実現可能だったら教えていただけないでしょうか？ (※FLASHは除く。例えばCSSなど) よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ご回答の内容で解決できました ありがとうございました。