How to create mouse hover effect to irregular shape on image map? The irregular shapes can be quite complicated,not poly/rectangle/triangle/circle but lantern or animal shape. Would this be possible ?
Asked
Active
Viewed 2,130 times
3
-
Do you mean that you want to highlight this shape? Or just the mouse over will occur in this shape? – Mosh Feu Jul 13 '16 at 05:17
-
This may be of use: http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag/12667751#12667751 – enhzflep Jul 13 '16 at 05:30
-
@MoshFeu Yes I hope to highlight the outline of the irregular shape – shu Jul 13 '16 at 06:43
-
Is @phelpsiv answer your question? – Mosh Feu Jul 13 '16 at 07:22
2 Answers
4
You could try an working with an SVG vector image to select specific irregular shapes.
CSS would look like:
.shape:hover {
fill: green;
}
and html SVG:
<svg version="1.0" width="291.000000pt" height="300.000000pt">
<g class="rabbit"fill="#000000" stroke="none" transform="translate(0.000000,300.000000) scale(0.100000,-0.100000)">
<path .../>
ivywit
- 473
- 2
- 8
- 17
-
+1 for SVG. Adobe Illustrator is great for creating SVGs automatically. If you're using a specific image map, you can trace over it in Illustrator, export the SVG, then use this method to make any given shape a hover state. (you can also make the standard state transparent) – Okomikeruko Jul 13 '16 at 05:36
-
-
The best I could find on that was **Harshad Hirapara answer below** to the best of my knowledge that's as close as you'll get. – ivywit Jul 13 '16 at 07:23
0
Try based on cordinates:
<map id="honeycomb" name="honeycomb">
<area shape="poly" alt="" title="" coords="493,23,572,65,573,159,491,204,415,158,415,67" href="" target="" />
<area shape="poly" alt="" title="" coords="651,22,732,66,732,158,652,203,574,158,573,66" href="" target="" />
...
</map>
Demo: jsFiddle
Harshad Hirapara
- 462
- 3
- 12