您的位置：首页 > 其它

点击图片特定区域实现图片动态切换（图片热点、谷歌手形切换）

2014-09-12 19:22 666 查看
关于点击图片的特定区域实现图片的动态切换效果，在网上找了很久，也没能找到合适的例子，好吧，只有自己动手写一个...

此案例运用了图片的热点技术，可以链接到特定的网页文件，但是此处不需要，我只需要切换的是图片而已

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hotDot</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#file>area").click(function() {
if($(this).attr("id") == 'left') {
//如果点击的是文件模式
$("#filemodel").attr("src","images/filemodel.png");
} else {
//如果点击的是图片模式
$("#filemodel").attr("src","images/picturemodel.png");
}
});
});
</script>

<style type="text/css">
#file area{
cursor: pointer;
}
area, param {
display: block;
}
</style>
</head>
<body>
<div style="cursor: pointer; width: 98px; height: 34px;">
<img id="filemodel" title="文件模式" style="width: 98px; height: 34px;" usemap="#file"
src="images/filemodel.png" />
</div>

<map name="file" id="file">
<area id="left" title="文件模式" shape="rect" coords="0,0,49,34" />
<area id="right" title="图片模式" shape="rect" coords="49,0,98,34" />
</map>
</body>
</html>

准备两张图片:





近两天突然发现了一个BUG，有带有图片热点的图片，在谷歌浏览器和Opera中，当鼠标移上去的时候，尽管在map中的area给其设置了cursor: pointer;但是鼠标就是不会变成手的形状，这个问题是在令人头疼。
最后纠结了很久，用firebug调试了一下，发现CSS样式中多了一个这样的属性 area,pram {display:none;},为什么这里会显示为none呢，如果显示是none的话，是否就说明了鼠标根本就没有移上去呢，这样不能变成手形也就可以解释了，果断重写了这段CSS代码，area{display:block;}，问题解决。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航