縦1000px 横1000pxの画像(test.jpg)があり、この画像は、5×5で25枚の縦200px 横200px の画像がつながって一枚となっています。と指定し（この時には、一番左上の200pxの画像が見えている）、その下に 1番目 2番目 3番目 4番目 5番目 6番目 7番目・・・ 24番目 25番目とクリックする場所を設けて、それぞれをクリックすると、「testplace」に各々の200pxずつの画像が表示されるようにするスクリプト「testscript」を作成したいと考えています。この方法だと画像は複数いらず1枚で済みます。CSSで背景画像を移動させる方法は使用しないで、実装できますでしょうか。よろしくお願いいたします。

枠より大きな画像を部分的に表示javascript

解決済

質問者：tractor2
質問日時：2011/04/19 18:41
回答数：3件

縦1000px 横1000pxの画像(test.jpg)があり、この画像は、5×5で25枚の縦200px 横200px の画像がつながって一枚となっています。

<img id="testplace"src="test.jpg" width="200px" height="200" />

と指定し（この時には、一番左上の200pxの画像が見えている）、その下に

<a href="javascript:void(0)" onclick="testscript(0,0)">1番目</a>
<a href="javascript:void(0)" onclick="testscript(0,200)">2番目</a>
<a href="javascript:void(0)" onclick="testscript(0,400)">3番目</a>
<a href="javascript:void(0)" onclick="testscript(0,600)">4番目</a>
<a href="javascript:void(0)" onclick="testscript(0,800)">5番目</a>
<a href="javascript:void(0)" onclick="testscript(200,0)">6番目</a>
<a href="javascript:void(0)" onclick="testscript(200,200)">7番目</a>
　　・
　　・
　　・
<a href="javascript:void(0)" onclick="testscript(800,600)">24番目</a>
<a href="javascript:void(0)" onclick="testscript(800,800)">25番目</a>

とクリックする場所を設けて、それぞれをクリックすると、「testplace」に各々の200pxずつの画像が表示されるようにするスクリプト「testscript」を作成したいと考えています。

この方法だと画像は複数いらず1枚で済みます。CSSで背景画像を移動させる方法は使用しないで、実装できますでしょうか。

よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2011/04/19 19:57

枠となるDIV要素を200×200で、position:relative;overflow:hidden;

で用意しておいて、その中に1000×1000の画像を　position:absolute; top:0px; left:0px;としてimg要素で配置しておき、
リンク（ボタンでもいいと思うけど）のクリックで、そのimg要素のstyle.topとstyle.leftを書き換えてやればよいと思う。

- 0
- 件

通報する

この回答へのお礼

DIV要素で枠を作っておいて、その中で画像を移動されればいいのですね。
おかげさまで解決できました。ありがとうございます。

通報する

お礼日時：2011/04/28 17:48

No.3

回答者： reggaepunc
回答日時：2011/04/22 00:40

ご指定の方法とは違う書き方ですが、書いてみましたー。

コピペで動くと思います。
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/ …
<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>

- 0
- 件

通報する

この回答へのお礼

画像の位置指定は、マイナスですね。
こちらもうっかりしていました。

少し自分にはレベルが高いですが、
こんなこともできるんだと、興味深く見ています。
視野を広げてくださったことにも、
ありがとうございます。

通報する

お礼日時：2011/04/28 17:57

No.2

回答者： reggaepunc
回答日時：2011/04/19 21:54

確認ですが、

><img id="testplace"src="test.jpg" width="200px" height="200" />
↑こちらの記述だと画像が小さくなると思いますが（test.jpgは1000×1000pxですよね？）
これは小さく表示された状態が正解なのでしょうか？
小さく表示された状態が正解だとすると、画像の表示部分は、
40×40pxになると思いますが、ここまでは合ってますか？