我可以使用这个复杂的不规则形状的链接

Question

我已经看了很多的这种可能的解决方案在CSS悬停，但仍然没有找到一个工程。我试图让我的链接使用CSS

我曾尝试使用一个矩形的每一个版本涵盖我的形象将它们连接悬停发光，但也有一些非常小，获得重叠。有没有办法将多边形坐标合并到CSS中？我认为我的主要问题是悬停时发光的css代码要求链接大小和宽度px。但我的HTML链接是不规则的形状x和y聚coords

这是我的CSS之一，我试图悬停，但不知道如果不是x和y坐标，要在宽度/高度区域放什么？

/* wiki image glow */ 
.wikiimageglow 
{ 
    margin-bottom: 10px; 
    width: px; 
    height:px; 
    display:block; 
    background:transparent url('http://cdn.obsidianportal.com/assets/199195/weird4.jpg') center top no-repeat; 
} 

.wikiimageglow:hover 
{ 
    background-image: url('http://cdn.obsidianportal.com/assets/199539/character.jpg');  
} 

这里是链接

<img src="http://cdn.obsidianportal.com/assets/199195/weird4.jpg" width="654" height="690" border="0" usemap="#Map" /> 
<map name="Map" id="Map"> 
    <area shape="poly" coords="351,81,386,317,335,295,302,215" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/game-master-information" /> 
    <area shape="poly" coords="567,202,405,376,390,321,435,243" href="http://www.obsidianportal.com/campaigns/runelords-of-lord-ao/items" /> 
    <area shape="poly" coords="368,426,403,379,491,365,608,445" href="http://www.obsidianportal.com/campaigns/runelords-of-lord-ao/characters" /> 
    <area shape="poly" coords="308,430,364,427,430,489,443,628" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/critical-hits-and-misses" /> 
    <area shape="poly" coords="268,383,305,428,296,514,195,616" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/character-creation" /> 
    <area shape="poly" coords="279,323,270,378,198,431,53,412" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/adventure-log" /> 
    <area shape="poly" coords="126,173,332,296,281,321,197,298" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/geography" /> 
    <area shape="poly" coords="145,530,151,485,199,457,179,507" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/pride" /> 
    <area shape="poly" coords="109,352,99,318,107,288,139,270,159,305,151,335" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/wrath" /> 
    <area shape="poly" coords="220,144,232,139,286,143,292,164,254,189,228,185" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/gluttony" /> 
    <area shape="poly" coords="432,142,463,142,480,152,461,174,415,211,414,174" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/greed" /> 
    <area shape="poly" coords="524,287,551,302,564,358,535,355" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/sloth" /> 
    <area shape="poly" coords="520,469,501,506,459,524,463,499,498,472" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/envy" /> 
    <area shape="poly" coords="323,522,343,562,337,594,328,606,307,578" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/lust" /> 
</map> 

Answer 1

我认为最简单的事情就是创建精灵这基本上是你的原始图像，并有到一边（通过CSS隐藏）你有你的悬停效果你希望在悬停时显示，替换图像的一部分，创建发光效果，如您所愿。

example sprite image

A List Apart: Sprites

Answer 2

我觉得这不能只用CSS和HTML来解决。但是，我发现了这个漂亮的jQuery脚本。它使用您的map标记并创建canvas元素。

• Demo
• Source

Maphilight是一个jQuery插件，增加了视觉hilights到图像映射。

它提供了一个jQuery函数：$（ '富'）maphilight（）

在IE VML被使用。在其他浏览器中使用画布。 Maphilight已经在Firefox，IE，Safari，Chrome和Opera上测试过 。

注意：此脚本在最新版本的jQuery中无效，但jquery-migrate固定。

这是JSFIDDLE