map,area标签

今天看petshop源码, 偶然发现个map和area标签,以前从没看到过(汗!)
立马google了一下. 终于明白了,post个备忘贴:

area是一块区域,这块区域可以当作导航用:

<area shape="rect" coords="240,235,140,300" href="http://www.vertigosoftware.com"
                target="_blank" alt="Vertigo Software" />

shape属性指明了区域的形状, coords指明了形状边界的几个点, href为导航到哪里的url

area不能独立出现, 必须嵌套在map中, map只作为area的容器:

<map id="vertigosoftware" name="vertigosoftware">
            <area shape="rect" coords="240,235,140,300" href="http://www.vertigosoftware.com"
                target="_blank" alt="Vertigo Software" />
        </map>

map要放哪里呢?请看

<img src="Comm_Images/home-fish.gif" alt="Created by Vertigo Software, Inc." usemap="#vertigosoftware"
                        border="0" />

这里的usemap属性就是引用map. 相当去在img上又放了个透明的img层, 层中的area指明了url以及可点击区域.

完整例子:

<img src="Comm_Images/home-fish.gif" alt="Created by Vertigo Software, Inc." usemap="#vertigosoftware"
                        border="0" />

<map id="vertigosoftware" name="vertigosoftware">
            <area shape="rect" coords="240,235,140,300" href="http://www.vertigosoftware.com"
                target="_blank" alt="Vertigo Software" />
        </map>