stunning-imagemaps's Introduction

Stunning ImageMaps

Converts HTML image maps to SVG equivalents.

Background

The initial reason for this plugin was to fix the image maps click problem in iOS8. But under the way I realized the plugin also could fix the responsive problem at the same time.

Installation

The plugin supports ”globals”, AMD and CommonJS. Install with bower install stunning-imagemaps or npm install stunning-imagemaps.

Initialize

Globals

The plugin is available in the window object as window.stunningImageMaps, so it's available to use like this:

stunningImageMaps.toSVG();

jQuery

Get “the real“ element when using in a jQuery environment.

stunningImageMaps.toSVG( $('map#imgmap').get(0) );

Browserify (CommonJS)

var stunningImageMaps = require('stunning-imagemaps');

stunningImageMaps.toSVG();

Options

The options object and their default setting.

.setup({
	inlineStyle: true	 			// Create inline styles or not
	useImageParentAsWrap: false,	// Will create wrap element if false
	classNames: {					// Class names
		prefix: 'imgmap__', 		// Prefix
		wrap: 'wrap',				// Wrap elements
		wrapIndividual: 'wrap--%',	// Individual wrap elements, % will be changed to map name attribute
		svg: 'svg',					// SVG elements
		svgIndividual: 'svg--%'	,	// Individual SVG elements, % will be changed to map name attribute
		area: 'area',				// Area elements
		areaIndividual: 'area--%'	// Individual area elements, % will be changed to map name attribute
	},
	onClick: function(e) { }		// Will be called when clicking area shape
});

Methods

// Change default options
.setup( options );

// Convert specific or all imagemaps to SVG, by giving either the img or map element.
.toSVG( [nothing for all, element or elements for specific] )

Recommend Projects