枠より大きな画像を部分的に表示javascript
縦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で背景画像を移動させる方法は使用しないで、実装できますでしょうか。
よろしくお願いいたします。
お礼
ありがとう