IE6BUG:不支持PNG-24的圖片格式。(不過最近發現就算在IE8，PNG-24的渲染也不是很好，因爲用jQuery的slideIn()函數，還是無法很好的渲染)，哎，人家谷歌都出webp了。
一看到頁面，就知道蛋疼，菱形的元素。最大的問題是兩個菱形元素中間還有一個插進去。
鼠標響應位置要怎麼定位呢？
只有一個元素切換圖片，相臨的元素不會影響到嗎？
。。。。。。？？？？？？？？
1、首先想到一種方法，當然是CSS3 transform: rotate將這個元素旋轉啦。不過切圖的時候需要將圖片翻轉過來。
這種方法只有在支持CSS3的瀏覽器才能使用。對於騰訊的頁面還是要求支持要至少支持IE6。在過去一年中國PC端瀏覽器的使用情況中（2012年5月——2013年5月），IE6的還是佔有很大份額，但是逐漸遞減。
2、先是將圖片切換與鼠標事件分離。這種方法不符合要求，這裏就不說了，或者就不應該叫做一種方法，但是我想了很久。
3、這第三種方法就是使用標籤map與area結合，運用圖像映射的方法建立鏈接。這種方法最合適不過了。
a、沒有兼容問題，至少在這個頁面沒有。
b、符合web標準語義化。
<area>
標籤定義圖像映射中的區域（注：圖像映射指得是帶有可點擊區域的圖像）。
area
元素總是嵌套在 <map> 標籤中。
PS：下圖是在DW裏面的顯示效果，DW提供實現查看的功能，因爲無法給area加border標籤，所以無法很準確的定好座標點（下圖的座標對得很不準）。
<img src="images/content_bg.png" usemap="#lianmengmap" alt="lianmeng" id="lianmeng"/>
<map name="lianmengmap" id="lianmengmap">
<area shape="polygon" coords="152,0,264,113,154,225,51,112" href ="" onclick="alert('OK');" alt="創建聯盟"/>
<area shape="polygon" coords="377,0,489,113,379,225,276,112" href ="" onclick="alert('OK');" alt="聯盟管理"/>
<area shape="polygon" coords="602,0,714,113,604,225,501,112" href ="" onclick="alert('OK');" alt="聯盟物資"/>
<area shape="polygon" coords="827,0,939,113,829,225,726,112" href ="" onclick="alert('暫未開放');return false;" alt="聯盟徽章"/>
<area shape="polygon" coords="264,113,376,225,264,338,154,225" href ="" onclick="alert('OK');" alt="聯盟官職"/>
<area shape="polygon" coords="489,113,601,225,489,338,376,225" href ="" onclick="alert('暫未開放');return false;" alt="聯盟野戰"/>
<area shape="polygon" coords="714,113,826,225,714,338,601,225" href ="" onclick="alert('OK');" alt="聯盟領地"/>
<area shape="polygon" coords="376,225,489,338,376,450,264,338" href ="" onclick="alert('暫未開放');return false;" alt="團隊系統"/>
<area shape="polygon" coords="601,225,714,338,601,450,489,338" href ="" onclick="alert('OK');" alt="聯盟要塞"/>
<area shape="polygon" coords="489,338,601,450,489,563,376,450" href ="" onclick="alert('OK');" alt="其它玩法"/>
</map>