CSS实现同一图片左右半边加链接导航-CSDN博客

不知道我这个标题把效果说明白没有，效果是这样的，如QQ空间查看好友日志中的图片时，弹出的图片中，鼠标放在图片左右两边时，分别显示左右箭头，点击鼠标分别进入前一张图片或后一张图片。QQ空间有一个巨大的js库，它这个效果是用js实现的，下面是我用CSS实现的，很简单的代码，抛砖引玉，考虑其他情况，可以做成更高级的效果。

DEMO演示：http://lyjweb.appspot.com/image-nav.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
html,body{
	background:#e0e0e0;
}
.imgBox img{
	border:1px dashed #666;
}
.imgBox{
	position: relative;
	float:left;
}
.imgBox div{
	position:absolute;
	left:0px;
	top:0px;
	width:50%;
	height:98%;
	background: #fff;
	opacity:0.0;
	filter:alpha(opacity=0);
}
.imgBox .left{
	cursor: url('http://cnc.qzs.qq.com/qzone/client/photo/cursor/pre.cur'),default;
}
.imgBox .right{
	left:50%;
	cursor: url('http://cnc.qzs.qq.com/qzone/client/photo/cursor/next.cur'),default;
}

</style>

</HEAD>

<BODY>

<div class="imgBox">
	<img src="http://www.w3schools.com/images/pulpit.jpg"/>
	<div class="left" οnclick="alert('left');">&nbsp;</div>
	<div class="right" οnclick="alert('right');">&nbsp;</div>
</div>

</BODY>
</HTML>