重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

画像の一部を表示

解決済

  • 質問者：noname#113783
  • 質問日時：
  • 回答数：2件

JavaScriptで画像の一部だけを表示することは出来るでしょか？イメージ的には、表示する枠を選んで表示したい部分の左上のXY座標を指定する、みたいな感じです。もちろん他の方法でもいいです。最終的にはその表示したい部分の左上の座標の値ををマウスや矢印キーなどで変えてグーグルマップのようなことが出来たらいいなと思っています。回答よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： _pipi_
  • 回答日時：

<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

画像が動いた！凄い！私もいつかこんな複雑なコードが書けたらいいです。

通報する
お礼日時：2008/10/09 00:26

No.1

  • 回答者： _pipi_
  • 回答日時：

.style.clip 参照

    • good
    • 0
    • 件
通報する
この回答へのお礼

clip属性ですね！ありがとうございます、原理が分かりました。JavaScriptじゃなくてCSSでしたね(＾＾;)

通報する
お礼日時：2008/10/09 00:01

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報