摘要：使用監聽中的元素的與事件，然后在中顯示第二層中相同索引的元素，從而實現高亮，事件用于清除高亮

坑爹的三角形導航終于制作完成了，下面分享一下思路，先看最終效果：
http://mall.juesheng.com/act/butie3

基本思路：使用古老的 Image Mapping 技術，在圖片上定義多邊形錨點，然后監聽每個錨點的鼠標事件，顯示指定的元素，實現錨點的高亮，由于 Image Mapping 中的多邊形錨點不支持樣式化，需要用其他手段進行高亮，先貼出 DOM 結構：

    

    

        

            /mall/act/butie3/tri_lt.png" width="110" height="109">
            古箏
        
        

            /mall/act/butie3/tri_rb.png" width="114" height="114">
            鋼琴
        
        

            /mall/act/butie3/tri_lt.png" width="147" height="147">
            瑜伽
        
        

             /mall/act/butie3/tri_lt.png" width="147" height="147">
            雅思
        
        

            /mall/act/butie3/tri_rb.png" width="147" height="147">
            英語思維
        
        

            /mall/act/butie3/tri_tr.png" width="147" height="147">
            舞蹈
        
        

            /mall/act/butie3/tri_rb.png" width="147" height="147">
            吉他
        
        

            /mall/act/butie3/tri_lt.png" width="146" height="146">
            少兒街舞
        
        

            /mall/act/butie3/tri_lt.png" width="147" height="147">
            素描
        
        

            /mall/act/butie3/tri_rb.png" width="113" height="112">
            藝考
        
    
    /10x10.gif" width="639" height="359"
        usemap="#navMap" class="map-img" alt="導航圖">
    

從 DOM 結構中可以看出，我們使用了三層結構：
一、map-layout-0，空元素，但它的樣式中，定義了其背景圖片為：

這是一個半透明的 PNG 圖片

二、map-layout-1，這一層用來高亮錨點，每一個錨點對應一個高亮元素，用腳本控制顯示隱藏，其中使用的 元素，即是高亮的三角形，其中，bt3_tri_lt.png、bt3_tri_tr.png、bt3_tri_rb.png 分別為：

之所以使用 img 元素而非 background，是因為需要對這些三角形進行縮放

三、class 為 map-img 的 img 元素及 map 元素，用來定義多邊形錨點（這里全部是三角形），map 中的 area 數據，是用古董級網頁設計軟件 Dreamweaver 生成的，如圖：

另外，這一層的 img 元素的 src 為一個 10 x 10 像素的透明 gif 圖片，真正用于導航的地圖，是第一層的背景圖片

下面看看樣式，用 LESS 寫成：

.map-box {
    position: absolute;
    right: 10px;
    bottom: -3px;
    width: 639px;
    height: 359px;
}

.map-layout-0,
.map-layout-1,
.map-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.map-layout-0 {
    background: url("@{img}/mall/act/butie3/map.png") no-repeat;
}

.map-node {
    position: absolute;
    width: 169px;
    height: 169px;
    img {
        position: absolute;
        display: none;
    }
    em {
        position: absolute;
        color: #fff;
        font-size: 20px;
        .yahei;
    }
}
.map-node-0 {
    left: 119px;
    top: 64px;
    em {
        left: 15px;
        top: 20px;
    }
}
.map-node-1 {
    left: 94px;
    top: 85px;
    em {
        left: 57px;
        top: 67px;
    }
}
.map-node-2 {
    left: 61px;
    top: 197px;
    em {
        left: 27px;
        top: 28px;
    }
}
.map-node-3 {
    left: 243px;
    top: 15px;
    em {
        left: 28px;
        top: 26px;
    }
}
.map-node-4 {
    left: 204px;
    top: 52px;
    em {
        left: 54px;
        top: 99px;
    }
}
.map-node-5 {
    left: 204px;
    top: 197px;
    em {
        left: 80px;
        top: 26px;
    }
}
.map-node-6 {
    left: 349px;
    top: 34px;
    em {
        left: 82px;
        top: 89px;
    }
}
.map-node-7 {
    left: 350px;
    top: 180px;
    em {
        left: 7px;
        top: 28px;
    }
}
.map-node-8 {
    left: 494px;
    top: 67px;
    em {
        left: 26px;
        top: 28px;
    }
}
.map-node-9 {
    left: 443px;
    top: 152px;
    em {
        left: 59px;
        top: 64px;
    }
}

上面已經解釋過，樣式代碼就不解釋了，再看看腳本：

define(function(require) {
    "use strict"
    var event = require("j/fn/event")

    function toggle(el, act) {
        var index = $(el).index()
        $("#mapNodeList").find("img").eq(index)[act]()
        act == "show" && event.fire("mapIndexChange", index)
    }

    $("#navMap").on("mouseenter", "area", function() {
        toggle(this, "show")
    })
    .on("mouseleave", "area", function() {
        toggle(this, "hide")
    })
})

define 是 SeaJS 提供的模塊定義函數，SeaJS 是模塊化管理前端腳本，非常 Nice 的工具，但這不是重點。
使用 jQuery 監聽 map 中的 area 元素的 mouseenter 與 mouseleave 事件，然后在 mouseenter 中顯示第二層中相同索引的 img 元素，從而實現高亮，mouseleave 事件用于清除高亮