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

html 专栏收录该内容
4 篇文章 0 订阅
关于点击图片的特定区域实现图片的动态切换效果,在网上找了很久,也没能找到合适的例子,好吧,只有自己动手写一个...

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

<!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;},问题解决。

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值