画像の一部を表示

解決済

質問者：noname#113783
質問日時：2008/10/08 01:14
回答数：2件

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

通報する

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

質問の本文を隠す

回答 (2件)

No.1

回答者： _pipi_
回答日時：2008/10/08 08:54

.style.clip 参照

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2008/10/09 00:01

No.2ベストアンサー

回答者： _pipi_
回答日時：2008/10/08 09:23

<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>