- ベストアンサー
javascriptで画像移動時に表示するマップ
webサイトで、大きな画像が枠に収まらない状態で、 マウスやスクロールバー等で画像の表示位置を変更する際に 表示する全体マップについてjavascriptでの実現方法を知りたいです。 どんな全体マップかといいますと 大きい画像の横隅に全体マップが表示されて、 大きいほうの画像の表示位置を変更すると、 全体マップの見えている部分を示すフィルターが移動する。 というような動作をjavascriptで考えております。 ２日ほどかけても、良いサンプルが見つかりませんでしたので、こちらで質問させていただいてます。 ちなみにイメージ画像を添付しておりますので、ご参考にしていただければと思います。
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
先月（2010年12月）ここで、そのようなサンプルの質問が投稿されていた。 これ↓ http://okwave.jp/qa/q6386595.html でも、もうリンク先が無くなったみたいだ。 「マジックズーム」とか「画像ズーム」で探せばいろいろ見つかるかも。 ※私が作った出来損ないMagicZoomCanvas（？）でよかったらどうぞ↓ https://gist.github.com/744364 （Firefox 3.6 、Google Chrome 8.05 で動作確認してあります。IEはだめ）
関連するQ&A
- JavaScriptでスクロール画像
JAvaScriptで、ブラウズのスクロール時に画像が常に固定の位置で表示される（付いて来る）ようなことをしたいのですが、何か良いサンプルはございますか？
- ベストアンサー
- JavaScript
- 画像の切り替え＋イメージマップ
下記のURLにあるようなhttp://www.openspc2.org/reibun/javascript/mouse/017/index.html 画像をJavaScriptで入れ替えて、それぞれの画像にイメージマップを作成するというものですが これを使い、XHTML＋CSSにて書き込んだところ クリック後の画像がfloatしてウィンドウサイズに合わせて動いてしまいます。（クリック前の初期状態の画像は問題なし） スクロールやウィンドウサイズ変更でも動かなくするにはどうすればよいでしょうか？ そもそもこのJavaScriptでは 実現不可能でしょうか？ もしそうであれば 代案などをいただければと思います。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascript初心者です。
javascript初心者です。 http://www.awaseba.com/sample/index.html の様に画像を組合せ、ドラッグで位置の移動、サイズの変更をやりたいのですが javascriptでの実現方法をどなたか教えていただけないでしょうか。 またはサンプルを掲載しているサイトか実現しているサイトを教えていただけないでしょうか。 よろしくお願い致します。
- 締切済み
- JavaScript
- イメージマップで文章を表示したい。
下記の例のように、「map.gif」という画像の各箇所ごとにそれぞれのリンクを貼るのは下記の方法で出来ると思うのですが、 「coords="22,11,122,62"」にマウスが乗ったときに指定した箇所に文章を表示するにはどうしたらよいのでしょうか？ ※それぞれの箇所によって、それぞれ違った文章を表示したいです。 ※「map.gif」という画像が表示されている上段（下段でもＯＫ）に枠を作って、その中に説明文が表示される仕組み。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area shape="default" href="map4.html" alt="リンク4"> </map> 宜しくお願いします。
- ベストアンサー
- HTML
- こんなJavascriptのサンプル探してます。
こんなJavascriptのサンプル探してます。 添付はGメールのインターフェイスなんですが、画像を取り込んでいるときにダウンロード中のバーがでますよね。こういうのを実現したいと思っているのですが、サンプルなどをうまく見つけることができていません。 もしご存知でしたら教えていただければ幸いです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- VBのPictureBoxで画像をドラッグして表示範囲を移動したい
お世話になります。 VB.netのPictureBoxに画像を貼り付け表示しているのですが、 PictureBoxよりも大きい画像を表示した際にスクロールバーで表示範囲の移動はできるのですが、 これをスクロールバーではなくマウスをドラッグして表示範囲の移動をしたいのです。 どのようにすればできますか？ よろしくお願いします。
- ベストアンサー
- Visual Basic
- OFF時のGoogle Map外枠
JavaScriptがオフである際に、 「JavaScriptがオフになっているため、ご利用いただけません」 という表示の下に画像のリンク切れの時のようなGoogle Mapの外枠だけが表示されてしまいます。 同じ形式で記述している他のJavaScriptは表示されないにもかかわらず Google Mapだけが画像のようになってしまいます。 様々調べてみたのですが、どうしても対処法が見つかりません。 どのようにしたらjavaScriptがOFFの際にこの枠が表示されないようになるのでしょうか？ 仕様なので表示されてしまうのでしょうか？
- 締切済み
- JavaScript
- 画像の一部を表示
JavaScriptで画像の一部だけを表示することは出来るでしょか？イメージ的には、表示する枠を選んで表示したい部分の左上のXY座標を指定する、みたいな感じです。もちろん他の方法でもいいです。最終的にはその表示したい部分の左上の座標の値ををマウスや矢印キーなどで変えてグーグルマップのようなことが出来たらいいなと思っています。回答よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像にマウスを重ねると大きな画像を表示したい
illustratorでスライスを作製し、画像を生成しました。 1000×1076のサイズで32個の画像で構成されるスライスになっています。 そのスライスの一部の画像にマウスオーバーするとスライス全体の 1000×1076と同じサイズの背景透明画像を上に表示したいのです。 よくあるボタンのマウスオーバーなどでやると元画像のまわりに画像がある想定ではないためか、マウスオーバーするとスライスが崩れてしまいます。 本来Flashなどでやるようなことと思いますが、 iPadでも見たいためCSSやJavascriptで実現したいと思います。 よろしくお願い致します。
- 締切済み
- CSS
- HPで画像の一部にマウスがのった時に画像を変えたい
現在、自社のホームページの作成を行っております。 そこで、以下のようなことを実現したいのですが、わからないので教えてください。 ----------- | | | ● | | | ----------- 上記のような、四角い枠の中に●がある画像があります。 この●にマウスをのせたときに、この四角い枠と丸の画像全体を変えたいと思っております。 画像上の●以外のとこにマウスをのせても画像は切り替わらないようにしたいと思っております。 四角い画像上にマウスをのせたときにhoverで画像を切り替えるようなことはできるのですが、 画像の一部（●部分）にマウスをのせたときにだけ画像を切り替える方法がわからないので困っております。 教えて頂けないでしょうか。
- ベストアンサー
- HTML
お礼
ありがとうございます 今回は「画像ズーム」はしないので ちょっと違うかなと思います。 でもこちらも参考になりますので、大変助かります。
補足
「画像ズームで調べたら求めていたものがありました ありがとうございました。