myfocus下怎么实现图像映射？
HTML<img><map><area>标签图像映射，在myfocus下用不了？怎么办？
慕虎4773338
2016-10-24
3 回答
亲测可以哦!
注意:因为浏览器的不同,在定义map的时候name和id都要定义和img里面的usemap相同!要是还是不行,把你写的代码贴出来给我看一下.
下面是我写的代码:具体的样式和视频中差不多,我这里用的jQuery启动的MyFocus.希望可以帮到你!
<!--焦点图制作--> <div class="picBox"> <div class="pic"> <ul> <!--thumb:图片缩略图地址,alt:图片描述,text:详细描述--> <li><a href="#"><img src="img/ad2.jpg" thumb="" alt="" text="" usemap="#mapTest"></a></li> <li><a href="#"><img src="img/ad3.jpg" thumb="" alt="" text=""></a></li> <li><a href="#"><img src="img/ad4.jpg" thumb="" alt="" text=""></a></li> </ul> </div> </div> <map id="mapTest" name="mapTest"> <area alt="映射测试" href="index.html" target="_blank" shape="circle" coords="500,150,50"/> </map> <!--焦点图制作结束-->
-------------------
//焦点图的样式
$('.picBox').myFocus({
id:'picBox',
loadIMGTimeout:0,//定义不需要加载时间.
time:3,
pattern:'mF_fancy',
height:310,
width:1000,
textHeight:'default',
});
下边是实现图像映射的代码（把图像中的某区域设置为可以点击的超链接），我想把它用在focus中的图片上（比如下图中的“”进入“”、“”了解更多的区域“”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
举报
0/150
提交
取消
