myfocus下怎么实现图像映射？

个回答

不起眼的魂: 2016-10-26 15:19:58

已采纳

亲测可以哦!

注意:因为浏览器的不同,在定义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',
	});

慕虎4773338

2016-10-25 17:55:25

下边是实现图像映射的代码（把图像中的某区域设置为可以点击的超链接），我想把它用在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
不起眼的魂

2016-10-24 19:44:22

看不懂你说的意思...能方便把代码贴出来吗?

0