- ベストアンサー
画像の一部を表示
JavaScriptで画像の一部だけを表示することは出来るでしょか？イメージ的には、表示する枠を選んで表示したい部分の左上のXY座標を指定する、みたいな感じです。もちろん他の方法でもいいです。最終的にはその表示したい部分の左上の座標の値ををマウスや矢印キーなどで変えてグーグルマップのようなことが出来たらいいなと思っています。回答よろしくお願いします。
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <body> <div id="a" class="ragimg" style="width:400px;height:400px;overflow:hidden; position:relative;"> <img src="hoge.jpg" class="dragimg" style="position:absolute;top:0px;left:0px;"> </div> <script> window.onload=function(){ var flag = 0; var sx,sy; window.document.onmousedown= function (e){ var o=e?e.target:event.srcElement; if(o.className !='dragimg') return; flag = 1; sx=((/*@cc_on!@*/false)? event.x :e.pageX) -parseInt(o.style.left); sy=((/*@cc_on!@*/false)? event.y :e.pageY) -parseInt(o.style.top); return false; } window.document.onmouseup = function(){ flag=0;return false; } window.document.onmousemove = function(e){ if (!flag) return; var o=e?e.target:event.srcElement; o.style.top = ((/*@cc_on!@*/false)? event.y :e.pageY)-sy +'px'; o.style.left= ((/*@cc_on!@*/false)? event.x :e.pageX)-sx +'px'; return false; } } </script>
その他の回答 (1)
.style.clip 参照
お礼
clip属性ですね！ありがとうございます、原理が分かりました。JavaScriptじゃなくてCSSでしたね(＾＾;)
関連するQ&A
- javascriptで画像移動時に表示するマップ
webサイトで、大きな画像が枠に収まらない状態で、 マウスやスクロールバー等で画像の表示位置を変更する際に 表示する全体マップについてjavascriptでの実現方法を知りたいです。 どんな全体マップかといいますと 大きい画像の横隅に全体マップが表示されて、 大きいほうの画像の表示位置を変更すると、 全体マップの見えている部分を示すフィルターが移動する。 というような動作をjavascriptで考えております。 ２日ほどかけても、良いサンプルが見つかりませんでしたので、こちらで質問させていただいてます。 ちなみにイメージ画像を添付しておりますので、ご参考にしていただければと思います。
- ベストアンサー
- JavaScript
- 画像のオンオフ（表示／不表示）
メニューの部分で →トップ（マウスオーバー） 日記 写真 掲示板 ・矢印は画像でメニュー項目は文字 ・テーブルは組まないようにしたい ・矢印の画像は全項目共通 上記のようにメニューにマウスが乗った時に、画像の矢印を表示させ、マウスアウトで不表示にしたいです。矢印画像と空白画像の切り換えも考えたのですが、単純に表示/不表示の切り換えでできないかなと考えましたが、そのコードがうまく考え付きません。visibilityとか使うのかな？？う～ん？？ このサイトやGoogleで検索しましたが、（単純すぎるのか？）見つけることができませんでした。 できればシンプルなコードをご教授いただければと思います。よろしくお願い致します。
- ベストアンサー
- JavaScript
- C++の画像表示について
C++で画像を表示するには、 LoadGraphScreenや DrawGraphなどを使い、左上の頂点座標を入力することで 画像が表示されますが、 その部分を「画像の中心の座標を入力して表示する」にはどうしたらいいのでしょうか？ わからなくて困っています。 どなたか教えてください。 よろしくお願いしますm(_ _)m
- 締切済み
- C・C++・C#
- グーグルマップが表示されません
どなたか教えて下さい。 ウインドウズ10、クロームですがグーグルマップを使用したサイトを開きたいのですが一瞬はマップが表示されますが次のような表示がでてマップが見れません。 javascriptコンソールで技術情報をご確認下さい 何をすれば見れるようになるのでしょうか？ APIキーは取得済みでスクリプトはすべて有効にしております
- 締切済み
- Windows 10
- google map について
google map が表示されません。 全く表示されないのですがどの部分が悪いのでしょうか？ サイトは作ってもらいました。 新たに自分で新しいページを作ろうとしています。 作ってもらったサイトにあったマップを新しいページにも貼りたいため ソースを見て、キーの載ってる部分、javascriptの部分、地図を表示させる部分、のタグをコピーしましたが、全く何も表示されない状態です。
- 締切済み
- その他（インターネット・Webサービス）
- HPで画像の一部にマウスがのった時に画像を変えたい
現在、自社のホームページの作成を行っております。 そこで、以下のようなことを実現したいのですが、わからないので教えてください。 ----------- | | | ● | | | ----------- 上記のような、四角い枠の中に●がある画像があります。 この●にマウスをのせたときに、この四角い枠と丸の画像全体を変えたいと思っております。 画像上の●以外のとこにマウスをのせても画像は切り替わらないようにしたいと思っております。 四角い画像上にマウスをのせたときにhoverで画像を切り替えるようなことはできるのですが、 画像の一部（●部分）にマウスをのせたときにだけ画像を切り替える方法がわからないので困っております。 教えて頂けないでしょうか。
- ベストアンサー
- HTML
- OFF時のGoogle Map外枠
JavaScriptがオフである際に、 「JavaScriptがオフになっているため、ご利用いただけません」 という表示の下に画像のリンク切れの時のようなGoogle Mapの外枠だけが表示されてしまいます。 同じ形式で記述している他のJavaScriptは表示されないにもかかわらず Google Mapだけが画像のようになってしまいます。 様々調べてみたのですが、どうしても対処法が見つかりません。 どのようにしたらjavaScriptがOFFの際にこの枠が表示されないようになるのでしょうか？ 仕様なので表示されてしまうのでしょうか？
- 締切済み
- JavaScript
- pdfファイルの表示について
pdfファイルを表示して矢印キーおよびマウスで ページをドラッグすると文章の一部に横線が入り正しく表示されません。最小化して再度最大化すると 直るのですが対処法は何かないでしょうか？
- ベストアンサー
- ブラウザ
- 画像が表示されない
仕事で必要なとあるHPの画像が一部のみ表示されません。 仕事が進まず困っています。。。 原因が推測できる方、よろしくお願いします。 詳細↓ ・画像が一部表示されないのはそのHPのみ。 ・ただ、そのHPを会社からみると普通に表示されます。 ・画像は真白で表示されないのですが、画像のあるはずの部分に マウスポインタをもっていくと、リンクはいきてます。 ・画像のあるはずの部分で右クリックすると、画像の枠は点線 で表示されます。あるのにみえない。。。 ・PCのOSはXP-SP2、先日購入したばかりのPCです。最初はそのHP も問題なく見えていました。セキュリティ関係をいろいろいじ ってはみたのですが改善されません。 たのHPは問題なく表示されるので、全く原因の予想もつかず困って います。よろしくお願いします。
- 締切済み
- その他（インターネット接続・通信）
お礼
画像が動いた！凄い！私もいつかこんな複雑なコードが書けたらいいです。