ShapeHover 1.1

ShapeHover add rollover effect on an image map using canvas or vml. It allows you to make some nices rollover menus with non-rectangular areas and it degrades gracefully in a simple image map if javascript is disabled or if the browser do not support canvas/vml.



Details

Author
Yannick Croissant
Current version
1.1
GitHub
yannickcr/ShapeHover
Downloads
5604
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.3: *
  • more/1.3.0.1:
    • Assets
    • Array.Extras

How to use

To use ShapeHover, you need an image with an image map in your HTML. Just call the constructor with the image element as first parameter and the options object as second parameter.

Example

HTML:

<img id="myimage" width="40" height="20" usemap="#mymap" alt="My Image" src="myimage.png"/>
<map name="mymap">
    <area shape="poly" coords="0,0,20,0,20,20,0,20" href="http://www.area-1.com" alt="Area 1"/>
    <area shape="poly" coords="20,00,40,00,40,20,20,20" href="http://www.area-2.com" alt="Area 2"/>
</map>

CSS:

img { border:0 }

JavaScript:

new ShapeHover('myimage', {
    fill: {
        type: 'color',
        content: '#F00'
    },
    stroke: false,
    fade: false,
    onClick: function(e){
        // do stuff
    }
});

Notes

  • Your image must not have border
  • If ShapeHover is initialized before the window.onLoad event, you must specify the dimensions of the image in the image element (width/height attributes)

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus