Can I use CSS hover on this complex irregular shaped link

Question

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>

You can't change the image content with html/css. Your best bet is to create a similar effect with absolutely positioned links in HTML and just the background for the image. — mowwwalker, Apr 06 '13 at 02:15
it might be better to split your image up and on hover show hover image as bg for that item. I'm guessing theres tons of ways to accomplish this but its a start. — Class, Apr 06 '13 at 02:16

Miljan Puzović · Answer 1 · 2013-04-06T03:27:00.057

4

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

edited Apr 06 '13 at 03:27

answered Apr 06 '13 at 02:47

Miljan Puzović

5,840
1
24
30

Yeah, really nice script. Bookmarked :) Thanks for edit and +1. – Miljan Puzović Apr 06 '13 at 03:00
1

Demo: http://jsfiddle.net/Zhs6q/. Worth noting that it doesn't work in the latest version of jQuery. – Tim M. Apr 06 '13 at 03:01
1

@Tim Medora Well, at least `jquery-migrate` fixed that http://jsfiddle.net/Zhs6q/2/ – Miljan Puzović Apr 06 '13 at 03:14

score 1 · Answer 2 · answered Apr 06 '13 at 02:39

1

I believe the simplest thing is to create sprites which is basically your original image and have off to the side (hidden via css) you have your hover effects you want shown when hover which replaces a part of the image creating a glow effect as you want it to be.

example sprite image

A List Apart: Sprites

answered Apr 06 '13 at 02:39

Class

3,149
3
22
31

I've looked at that solution before and may try a version of it. My only problem is that some of my shapes are small and may fall under and be completely overlapped by the two irregular shaped links next to it. here is the image http://cdn.obsidianportal.com/assets/199195/weird4.jpg – user2251183 Apr 06 '13 at 02:47

Can I use CSS hover on this complex irregular shaped link

2 Answers2

Linked