jQuery的问题

有一张图片，鼠标放在图片的右半部分，就显示个向右方向图片
鼠标放在图片的左半部分，就显示个向左方向图片用mousrover 只能在图片上显示一张图片啊，
求解

解决方案 »

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

先拿到图片的宽度，然后除以2onmouseover的时候判断鼠标位置在图片的哪边就行了~·大概思路就是这样~·
mousrover 不好吧，应该用单机事件
哦应该是 onMouseMove=""
mousrover和click效果都是一样的，都是event反应。
1，有一种思路就是将这个图片剪切为左右两张。OK了
2，如果图片位置固定的话，可以通过图片的中间线横坐标确定要显示的范围。建议思路：其实左右图片显示与鼠标位置的不同是没关系的，先考虑点击图片左侧，图片左侧出现，点击图片右侧，图片右侧出现。再考虑位置相反问题
<html>
<head>
<script type='text/javascript'
src="F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\jQuery\jquery-1.4.3.js"></script><script type="text/javascript">
$(function(){
var imgTag = $("#imgTag");
var imgWidth = imgTag.attr("width");//图片的宽度
var imgOffset = imgTag.offset();
var left = imgOffset.left;//图片的左位置
var r = left+imgWidth;//图片的最右边缘
var c = left+imgWidth/2;//图片的中间位置

// 如果是点击
imgTag.click(function(e){
var clik = e.originalEvent.x;
if(clik>c && clik<r){
imgTag.attr("src","F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\images\61.jpg");
}else if(click>left && click<c){
imgTag.attr("src","F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\images\59.jpg");
}
});
});
</script>
<title>Haha</title>
</head>
<body>
<center>
<img alt="" id="imgTag" width="200px" height="150px" src="F:\MyWorkSpaces\workspacecasemg\JavaWeb\Web\images\60.jpg"/>
</center>
</body>
</html>根据这个代码改下试试
为什么 var left = imgOffset.left;
我用老是提示‘left’为空或者不是对象
应该比较完善了，保存到文件中即可看到效果！
<!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>
    <title>切换图片</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#leftWindow').hover(function(){$('#leftArrow').show()},function(){$('#leftArrow').hide()}).click(function(){alert('上一张')});
        $('#rightWindow').hover(function(){$('#rightArrow').show()},function(){$('#rightArrow').hide()}).click(function(){alert('下一张')});
    });
    </script>
    <style type="text/css">
        #picWindow  { width:800px; border:2px solid red; position:relative; overflow:hidden; text-align:center; }
        #leftWindow { width:40%; height:100%; left:0;  position:absolute; border:1px solid blue;}
        #rightWindow{ width:40%; height:100%; right:0; position:absolute; border:1px solid green;}
        #leftArrow  { display:none; padding:40px; background:pink; position:absolute; left:30px; margin-top:50%; top:-50px; }
        #rightArrow { display:none; padding:40px; background:pink; position:absolute;right:30px; margin-top:50%; top:-50px; }
    </style>
</head>
<body>
<div id='picWindow'>
    <div id='leftArrow'>《</div>
    <div id='leftWindow'></div>

    <div id='rightArrow'>》</div>
    <div id='rightWindow'></div>

    <img src='http://img1.gtimg.com/2/260/26034/2603477_980x1200_0.jpg' />
</div>
</body>
</html>
<!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>
<script>
</script>
<style></style>
<body>
<img src="b.jpg" id="last" style="display:none"/>
<img src="a.jpg" alt="新书架" width="400" height="400" hspace="10" align="left" usemap="#newbook" border="0"/>
<img src="c.jpg" id="next" style="display:none"/>
<map name="newbook"><area shape="rect" coords="0,0,200,400" onmouseover="document.getElementById('last').style.display='block'" onmouseout="document.getElementById('last').style.display='none'"/><area shape="rect" coords="200,0,400,400"  onmouseover="document.getElementById('next').style.display='block'" onmouseout="document.getElementById('next').style.display='none'"/></map>
<script>
</script>
</body>
</html>