- ベストアンサー
枠より大きな画像を部分的に表示する方法
- 縦1000px 横1000pxの画像を部分的に表示する方法について説明します。
- 画像は5×5の25枚の縦200px 横200pxの画像で構成されています。
- 指定した場所をクリックすると、対応する部分画像が表示されるスクリプトを作成する方法を教えてください。
- tractor2
- お礼率92% (12/13)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
枠となるDIV要素を200×200で、position:relative;overflow:hidden; で用意しておいて、その中に1000×1000の画像を position:absolute; top:0px; left:0px;としてimg要素で配置しておき、 リンク（ボタンでもいいと思うけど）のクリックで、そのimg要素のstyle.topとstyle.leftを書き換えてやればよいと思う。
その他の回答 (2)
- reggaepunc
- ベストアンサー率59% (64/108)
ご指定の方法とは違う書き方ですが、書いてみましたー。 コピペで動くと思います。 firefox3.6では動いてましたー。 position:absolute;にして、 topプロパティとleftプロパティを変えて移動させました。 ---------------------------------- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <style> a { margin:0 10px 0 0; } </style> </head> <body> <div id="target"><img id="testplace" src="test.jpg"></div> <script> /* [ 1000 * 1000 ] */ function createBtnAndAction() { this.num = 25; var img = $('#testplace'); var width = img.width(); var height = img.height(); var i; var count = 1; var number = 1; var body = $('body'); var btn; var position = [ [0,0],[-200,0],[-400,0],[-600,0],[-800,0], [0,-200],[-200,-200],[-400,-200],[-600,-200],[-800,-200], [0,-400],[-200,-400],[-400,-400],[-600,-400],[-800,-400], [0,-600],[-200,-600],[-400,-600],[-600,-600],[-800,-600], [0,-800],[-200,-800],[-400,-800],[-600,-800],[-800,-800] ]; var testplace = $('#testplace'); // 動かす下準備 testplace.css({ position : 'absolute' }); // targetを隠すためにCSS設定！ $('#target').css({ width : width / 5, height : height / 5, overflow : 'hidden', position : 'relative' }); // ボタンを25個つくる！ for( i = 0; i < this.num; i++ ) { if( String( count ).length == 1 ) number = '0' + number; btn = $('<a href="#" rel="' + i + '">' + number + '</a>'); btn.click(function( e ) { var Y = position[ this.rel ][1]; var X = position[ this.rel ][0]; console.debug( ); testplace.animate({ top : Y + 'px', left : X + 'px' }, 400); e.preventDefault(); }); // 追加 body.append( btn ); if( count % 5 == 0 ) { body.append('<br>'); } number++; count++; } }; new createBtnAndAction(); </script> </body> </html>
お礼
画像の位置指定は、マイナスですね。 こちらもうっかりしていました。 少し自分にはレベルが高いですが、 こんなこともできるんだと、興味深く見ています。 視野を広げてくださったことにも、 ありがとうございます。
- reggaepunc
- ベストアンサー率59% (64/108)
確認ですが、 ><img id="testplace"src="test.jpg" width="200px" height="200" /> ↑こちらの記述だと画像が小さくなると思いますが（test.jpgは1000×1000pxですよね？） これは小さく表示された状態が正解なのでしょうか？ 小さく表示された状態が正解だとすると、画像の表示部分は、 40×40pxになると思いますが、ここまでは合ってますか？
補足
「 width="200px" height="200" 」の部分を 「 width="1000" height="1000" 」に訂正します。 ご指摘ありがとうございます。
お礼
DIV要素で枠を作っておいて、その中で画像を移動されればいいのですね。 おかげさまで解決できました。ありがとうございます。