CSS实现同一图片左右半边加链接导航
2011-02-23 13:35
471 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE></TITLE> <mce: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('/photo/cursor/pre.cur'),default; } .imgBox .right{ left:50%; cursor: url('/photo/cursor/next.cur'),default; } --></mce:style><style mce_bogus="1"> 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('/photo/cursor/pre.cur'),default; } .imgBox .right{ left:50%; cursor: url('/photo/cursor/next.cur'),default; } </style> </HEAD> <BODY> <div class="imgBox"> <img src="http://www.w3schools.com/images/pulpit.jpg" mce_src="http://www.w3schools.com/images/pulpit.jpg"/> <div class="left" onclick="alert('left');"> </div> <div class="right" onclick="alert('right');"> </div> </div> </BODY> </HTML>
相关文章推荐
- css实现div内图片上下左右居中
- CSS实现同一背景图的导航菜单
- CSS 伪类实现的鼠标滑动图片链接
- 用纯CSS实现容器内图片上下左右居中
- CSS实现图片在DIV中上下左右居中(1)
- css 实现 图片链接 图片变换
- 只用CSS实现容器内图片上下左右居中
- Html+Css 链接状态变换的单图片实现(精通CSS高级WEB解决方案)读书笔记
- css实现div中的图片自动上下左右居中
- CSS伪类实现的鼠标滑动图片链接
- 用CSS实现鼠标经过图片链接加边框
- CSS基础实例:CSS实现带背景图片的文字链接的方法
- CSS实现背景图片不规则的导航菜单
- CSS实现背景图片的左右晃动
- 不规则背景墙 CSS实现背景图片不规则的导航菜单
- 只用CSS实现容器内图片上下左右居中
- CSS 伪类实现的鼠标滑动图片链接
- ViewPager与ViewFlipper实现图片导航的左右滑动
- CSS实现背景图片不规则的导航菜单
- CSS实现同一背景图的导航菜单