加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

HTML – 我可以在这个复杂的不规则形状的链接上使用CSS悬停

发布时间:2020-12-14 21:14:45 所属栏目:资源 来源:网络整理
导读:我已经看了很多可能的解决方案,但仍然没有找到一个有效的解决方案.我试图让我的链接在使用CSS悬停时发光 我试图使用矩形的每个版本来包含我的图像来链接它们,但有些非常小并且重叠.有没有办法将多边形坐标合并到CSS中?我认为我的主要问题是css代码在悬停时
我已经看了很多可能的解决方案,但仍然没有找到一个有效的解决方案.我试图让我的链接在使用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.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,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,281,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,159,335" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/wrath" />
    <area shape="poly" coords="220,144,232,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,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,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,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>

解决方法

我认为仅使用CSS和HTML无法解决这个问题.但是,我发现了这个不错的jQuery脚本.它使用您的地图标记并创建画布元素.

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

注意:此脚本在最新版本的jQuery中不起作用,但jquery-migrate修复了该脚本.

这是JSFIDDLE

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读