縦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で背景画像を移動させる方法は使用しないで、実装できますでしょうか。

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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

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


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

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

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

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


コピペで動くと思います。
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>
    • good
    • 0
この回答へのお礼

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

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

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

確認ですが、


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

この回答への補足

「 width="200px" height="200" 」の部分を
「 width="1000" height="1000" 」に訂正します。
ご指摘ありがとうございます。

補足日時:2011/04/21 15:39
    • good
    • 0

このQ&Aに関連する人気のQ&A

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


人気Q&Aランキング