HTML中的map標籤的使用

map 的 意思是 熱點圖片,可以在一張圖片中定義一些熱點,這些熱點可以實現超鏈接等。

在Html中,給圖像使用map標籤,可以給圖像的某個部分建立超連接,用法如下:

  • <img src=img.gif usemap="MAP-Name">  

  • <map name="MAP-Name">  

  •  <area shape="rect|circle|poly" coords="#" href="url" title="">  

  • </map> 

    shape -- 定義熱點形狀

    coords -- 定義區域點的座標

    title -- 定義鼠標放在熱點區域上的提示語。

  • href--定義熱點能夠超鏈接的網址

注:所有的座標都是相對於圖片左上角的,是一個相對座標。

下面是一個例子

<html>

   <head>

      <title>圖片</title>

 

   </head>

   <body>

     <img src="tupian/0.jpg" width="200" height="200" title="多麼可愛"/>

<img src="tupian/2.jpg" title="多麼可愛的小女孩啊." border="2" usemap="#test"  width="200" height="200"/>

<map  name ="test" id ="test">

   <area shape="circle" coords="57,55,25" href="http://www.baidu.com" title="點擊跳轉到百度頁面"/>

<area shape="rect" coords="100,80,150,150"  href="http://hao.360.cn/?src=lm&ls=n12a73f3d90" title="點擊跳轉到360頁面"/>

</map>

   </body>

</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章