高分！！！分很容易拿的。将一个大的图片分割显示

现在在我的jsp页面中，想在js中提取一个大的图片，并将图片虚拟分割显示这个大图片的一部分。跪求高手指点。场景如下：
1.大的图片为images/englishBook.gif   其中w:280px，h:1143px，图片如下：
2.要将该大的图片分割为3个小的图片，大小为：w：280px，h：381px，放到js中的数值中，红色部分需要分割实现的。Book_Image_Sources=new Array(
   "images/englishBook.gif","#",
   "images/englishBook.gif","#",
   "images/englishBook.gif","#",
   );各位大侠，在线等的！
以上只是我现在的想法，如果大侠知道好的办法也可以的，只要能进行分割，一切都是好说的。在这向大家先说声谢谢了！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

css来做<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <style>
div {
margin:20px;
width:280px; height:381px;
background: url('http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif');
}
.a {
background-position:center;
}
.b {
background-position:bottom;
}
        </style>
    </head>
    <body>
<div></div>
<div class="a"></div>
<div class="b"></div>
        <script>

        </script>
    </body>
</html>
大侠，可以直接写js中如何分割图片就ok的！在线等……
干嘛不人工分割后再显示？
楼主的意思是用js动态分割图片生成新图片再进行展示吗？
如果是那样，canvas好像是有这样的图片处理能力的
谢谢了！这个css知道，但是本来我的这个数值是三张图片的路径，
Book_Image_Sources=new Array(
   "images/englishBook.gif","#",
   "images/englishBook.gif","#",
   "images/englishBook.gif","#",
   );
而且是在js中的，不是在body中的。如果用css好像不能吧!如果知道如何怎么实现，希望指教！再次感谢！
谢谢你的问题，我是像js动态分割图片，并在js中对分割的图片（这个分割只是虚拟的，只是显示大的图片的一部分来虚拟分割）进行动态显示在页面的。人工分割的话需要改底层了，所以这个不是最佳的方案。
您的意思是和1楼的一样的吧！但是在body中显示之前我要对数值进行操作的呀！
设置cssText属性，可以用js先计算,再设置数组中的值<!doctype html >
<html><head>
<title> new document </title>
<script type="text/javascript">
Book_Image_Sources = new Array(
  "width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif)","#",
  "width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif) 0 -381px;","#",
  "width:280px; height:381px; background:url(http://img.my.csdn.net/uploads/201205/08/1336442293_9753.gif) 0 -762px;","#"
);
window.onload = function(){
var d = document.getElementsByTagName("div");
for(var i = 0; i < d.length; i++){
d[i].style.cssText = Book_Image_Sources[i*2];
}
};
</script>
</head>
<body>
<div></div>
<br>
<div></div>
<br>
<div></div>
</body>
</html>
css的clip，可以通过 js来操作，参考下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(10px 80px 151px 0px);
}
</style>
</head><body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="http://www.w3school.com.cn/i/eg_bookasp.gif"></p>
</body></html>
利用的DIV的overflow属性，把超出范围的图片隐藏掉
<div style="width:280px;height:381px;overflow:hidden;border: 1px solid #ff0000" >
        <img alt="" src="img/1336442293_9753.gif"
            style="margin-top: -356px;margin-left: 0px">
</div>
在显示的时候把img标签替换成3个同等布局效果的东西不就行了么.
这个用css和js配合应该很好做吧