我可以在这个复杂的不规则形状的链接上使用CSS悬停 [英] Can I use CSS hover on this complex irregular shaped link

问题描述

我已经看过很多可能的解决方案，但仍然没有找到一个工作。我试图让我的链接发光悬停使用CSS

我试图使用每个版本的矩形包含我的图像链接他们，但有些是非常小和重叠。有没有办法将多边形坐标合并到CSS？我认为我的主要问题是css代码发光翱翔请求的宽度和hgt px的链接大小。但我的html链接是不规则形状的x和y聚坐标

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

解决方案

我认为这不能用CSS和仅HTML。但是，我发现了这个漂亮的jQuery脚本。它使用您的 map 标记并创建 canvas 元素。

• 演示


• 来源

$ b

它提供了一个单独的jQuery函数：$（' .foo'）。maphilight（）

在IE中使用VML。在其他浏览器中使用canvas。 Maphilight有
已在Firefox，IE，Safari，Chrome和Opera上测试。

注意：此脚本不在最新版本的jQuery中工作，但是 jquery-migrate 修复了这个问题。

http://jsfiddle.net/Zhs6q/3/rel =nofollow> JSFIDDLE

I've looked at a lot of possible solutions to this, but still have not found one that works. I am trying to get my links to glow on hover using CSS

I have tried to use every version of a rectangle to encompass my image to link them, but some are very small and get overlapped. Is there a way to incorporate poly coordinates into CSS? I think my main issue is css code to glow on hover asks for links size by width and hgt px. But my html links are irregular shaped x and y poly coords

Here is one of my CSS I was trying to hover but not sure what to put in the width/height area if not the x and y coord?

/* 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');     
}

Here are the links

<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>

解决方案

I think this can't be solved with CSS and HTML only. But, I've found out this nice jQuery script. It uses your map markup and creates canvas elements.

• Demo
• Source

Maphilight is a jQuery plugin that adds visual hilights to image maps.

It provides a single jQuery function: $('.foo').maphilight()

In IE VML is used. In other browsers canvas is used. Maphilight has been tested in Firefox, IE, Safari, Chrome, and Opera.

NOTE: This script doesn't work in the latest version of jQuery, but jquery-migrate fixed that.

Here is JSFIDDLE

这篇关于我可以在这个复杂的不规则形状的链接上使用CSS悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！