javascriptを使って、小さい枠の中で大図のコードをブラウズすることを実現します。
<) xmlns="http://www.w3.org/1999/xhtml"> http-equiv=「Conttentt-Type」 content="text/html charset=gb 2312" /> タイトルレスドキュメント <スタイル type=「text/css」<！--嚓pic { height: 300 px; width: 420 px; border: 3 px ソロ？id #ccc background-mage: urlhttp://www.happyshow.org/sample/20060619/3.jpg）0 background-repeat: no-repeat background-position: 0 px 0 px; background-カラー: #333; cursor: crossharir;> type=「text/javascript」<！--var p = new Aray()var スピード = 1.0; // 1 1倍の速度を表します。つまり元の速度varです。 x，y // マウスをクリックしたときの背景の座標バー x_new，y_new //シフトfunction get mouseposition(イベント)｛ if(document.all) { x = Dcument.body.scrollLeft+event.client X； y = Dcument.body.scrollTop+event.client Y； }else { x = event.layerX y = event.layerY } } 機能 set mouseposition(イベント)｛ if(document.getElement ById('pic').style.background Positions.length==0) {Dcument.getElemenntById.style.background Position=0 px 0 px"; p = Dcument.getElement ById.style.background Positions.split(" ") if(document.all) { x_new = Dcument.body.scrollLeft+event.client X； y_new = Dcument.body.scrollTop+event.client Y； }else { x_new = event.layerX y_new = event.layerY } x 2 = (speed*(x_new-x)+parseInt(p[0]）.toString(10); // 変位量を計算する y 2 = (speed*(y_new-y)+parseInt(p[1]）.toString(10); Dcument.getElemenntById.style.background Position=x 2+「px」 "+y 2+「px」⇒ 今日は遊んでいます。 google アース 4.0 b、発見 Print シュリーン 下の写真がとても大きいです。直接ホームページに置いたら、サイズが大又に合わなくて、写真のサイズを圧縮したくないです。へへ，いまいましいのは、このコードはまだ互換性があります。 firefoxbody>今日は遊んでいます。 google アース 4.0 b、発見 Print シュリーン 下の写真はとても大きいです。もしウェブサイトに置いたら、写真のサイズを圧縮したくないです。この方法を思い付きました。実現は予想より容易です。へへ，いまいましいのは、このコードはまだ互換性があります。 firefox。--------------------------------------------------2006.20 修正：・スクロールの範囲を追加しましたので、背景が出ないようにします。DOCTYPE html PUBLIC "-//W 3 C//DMD XHTML 1.0 Transitional/EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd<><> xmlns="http://www.w3.org/1999/xhtml"> http-equiv=「Conttentt-Type」 content="text/html charset=gb 2312" /> タイトルレスドキュメント <スタイル type=「text/css」<！--嚓pic { width:420 px; height：300 px border: 3 px ソロ？id #ccc background-mage: urlhttp://www.happyshow.org/sample/20060619/3.jpg）0 background-repeat: no-repeat background-position: 0 px 0 px; cursor: move;> type=「text/javascript」<！--var p = new Aray()var スピード = 0.05; //スピードバー picWidth = 1280; // 大図の横高var picHeight = 971;var x，y // マウスをクリックしたときの背景の座標バー x_new，y_new //シフトvar haveclick = false;機能 get mouseposition(イベント)｛ if(document.all) { x = Dcument.body.scrollLeft+event.client X； y = Dcument.body.scrollTop+event.client Y； }else { x = event.layerX y = event.layerY } haveclick = true;機能 movestop(){ haveclick = false;機能 movestart｛if（haveclick）｝ if(document.getElement ById('pic').style.background Positions.length==0) {Dcument.getElemenntById.style.background Position=0 px 0 px"; p = Dcument.getElement ById.style.background Positions.split(" ") if(document.all) { x_new = Dcument.body.scrollLeft+event.client X； y_new = Dcument.body.scrollTop+event.client Y； }else { x_new = event.layerX y_new = event.layerY } x 2 = (speed*(x_new-x)+parseInt(p[0]）.toString(10); // 変位量を計算する y 2 = (speed*(y_new-y)+parseInt(p[1]）.toString(10); if (x 2<-picWidth+420） x 2=-picWidth+420 if (y 2>0) y 2=0 if (x 2>0) x 2=0 if (y 2<-picHeight+300） y 2=-picHeight+300 Dcument.getElemenntById.style.background Position=x 2+「px」 "+y 2+「px」⇒