                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn)

myfocus下怎么實(shí)現(xiàn)圖像映射？

HTML<img><map><area>標(biāo)簽圖像映射，在myfocus下用不了？怎么辦？

慕虎4773338

2016-10-24

源自：企業(yè)網(wǎng)站綜合布局實(shí)戰(zhàn) 3-9

關(guān)注問題我要回答

769

操作

收起

3 回答

不起眼的魂回答被采納 +3 積分
2016-10-26

親測可以哦!

注意:因?yàn)闉g覽器的不同,在定義map的時(shí)候name和id都要定義和img里面的usemap相同!要是還是不行,把你寫的代碼貼出來給我看一下.

下面是我寫的代碼:具體的樣式和視頻中差不多,我這里用的jQuery啟動(dòng)的MyFocus.希望可以幫到你!

<!--焦點(diǎn)圖制作-->
<div?class="picBox">
<div?class="pic">
<ul>
<!--thumb:圖片縮略圖地址,alt:圖片描述,text:詳細(xì)描述-->
<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>
<!--焦點(diǎn)圖制作結(jié)束-->

-------------------

//焦點(diǎn)圖的樣式
	$('.picBox').myFocus({
		id:'picBox',
		loadIMGTimeout:0,//定義不需要加載時(shí)間.
		time:3,
		pattern:'mF_fancy',
		height:310,
		width:1000,
		textHeight:'default',
	});

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕虎4773338 提問者

我再試試謝謝你

2016-10-26 回復(fù) 有任何疑惑可以回復(fù)我~

#2

不起眼的魂回復(fù) 慕虎4773338 提問者

不客氣哦,有什么問題在一起探討..我也是初學(xué)者..你不說我還不知道有map映射這個(gè)用法.

2016-10-26 回復(fù) 有任何疑惑可以回復(fù)我~

慕虎4773338 提問者
2016-10-25

下邊是實(shí)現(xiàn)圖像映射的代碼（把圖像中的某區(qū)域設(shè)置為可以點(diǎn)擊的超鏈接），我想把它用在focus中的圖片上（比如下圖中的“”進(jìn)入“”、“”了解更多的區(qū)域“”。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
</head>
<body>

<p>點(diǎn)擊太陽或其他行星，注意變化：</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>