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

来源：互联网发布：dsp竞价算法编辑：程序博客网时间：2024/05/01 22:29

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

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

<!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