在html里面处理菱形元素的各种情况

今天切了个页面，说自己蛋疼是有点，但是又更是因为IE的拖后腿。

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 ="" οnclick="alert('OK');" alt="创建联盟"/>
        <area shape="polygon" coords="377,0,489,113,379,225,276,112" href ="" οnclick="alert('OK');" alt="联盟管理"/>
        <area shape="polygon" coords="602,0,714,113,604,225,501,112" href ="" οnclick="alert('OK');" alt="联盟物资"/>
        <area shape="polygon" coords="827,0,939,113,829,225,726,112" href ="" οnclick="alert('暂未开放');return false;" alt="联盟徽章"/>

        <area shape="polygon" coords="264,113,376,225,264,338,154,225" href ="" οnclick="alert('OK');" alt="联盟官职"/>
        <area shape="polygon" coords="489,113,601,225,489,338,376,225" href ="" οnclick="alert('暂未开放');return false;" alt="联盟野战"/>
        <area shape="polygon" coords="714,113,826,225,714,338,601,225" href ="" οnclick="alert('OK');" alt="联盟领地"/>

        <area shape="polygon" coords="376,225,489,338,376,450,264,338" href ="" οnclick="alert('暂未开放');return false;" alt="团队系统"/>
        <area shape="polygon" coords="601,225,714,338,601,450,489,338" href ="" οnclick="alert('OK');" alt="联盟要塞"/>

        <area shape="polygon" coords="489,338,601,450,489,563,376,450" href ="" οnclick="alert('OK');" alt="其它玩法"/>
      </map>