Biblioteca de JavaScript para resaltar mapa de imagen-marcador de imagen del resaltador

Vista prévia

Descripción

Un iluminador de mapa de imagen basado en JavaScript puro que permite resaltar áreas específicas de sus imágenes con estilos personalizados. Funciona en los navegadores modernos que tienen soporte HTML5 Canvas.

Funcionamiento

Inserte la imagen en la etiqueta IMG que tiene un atributo ' USEMAP '.

<img src="demo.jpg" usemap="#map">

Defina las áreas seleccionables personalizadas dentro del ImageMap de la siguiente manera:

<map name="map">

<area href="#" shape="poly" coords="240,300,400,300,400,200,240,200">

<area href="#" shape="circle" coords="200,100,60">
</map>

Los estilos CSS primarios para el resaltador de mapa de imagen.

.map-container {

background-size: cover;

position: relative;
}

.map-container canvas { position: absolute; }

.map-container img {

opacity: 0;

position: absolute;
}

Incluya el archivo JavaScript principal en la parte inferior de la Página Web.

<script src="dist/image-map-highlighter.js"></script>

Cree un nuevo ImageMapHighlighter en la imagen.

var image = document.querySelector('.image');
var highlighter = new ImageMapHighlighter(image);

Inicialice el resaltador de mapa de imagen.

highlighter.init();

Personalice los mapas de imagen cuando esté resaltado en el ratón.

var highlighter = new ImageMapHighlighter(image,{


fill: true,


fillColor: '000000',


fillOpacity: 0.2,


stroke: true,


strokeColor: 'ff0000',


strokeOpacity: 1,


strokeWidth: 1,


alwaysOn: false
});