                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

myfocus下怎么實現圖像映射？

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

慕虎4773338

2016-10-24

源自：企業網站綜合布局實戰 3-9

關注問題我要回答

773

操作

收起

3 回答

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

親測可以哦!

注意:因為瀏覽器的不同,在定義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',
	});

0 回復有任何疑惑可以回復我~

收起回答

慕虎4773338 提問者

我再試試謝謝你

2016-10-26 回復有任何疑惑可以回復我~

不起眼的魂回復慕虎4773338 提問者

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

2016-10-26 回復有任何疑惑可以回復我~

慕虎4773338 提問者
2016-10-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>