Resaltar una sección de una imagen en JavaScript

Solución:

En lugar de usar mapas de imágenes, puede probar este método CSS:

Utilice un transparente <div> en la parte superior de cada parte de “mapa de imagen” (enlace) y, a continuación, utilice el CSS :hover pseudo-clase para manejar el resaltado.

CSS:

#image { 
    position: relative; 
    width: 400px;
    height: 100px; 
    background-image: url(image_map.png); 
}

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent;  
}   

#map-part:hover { 
    background-color: yellow;           /* Yellow Highlight On Hover */
    opacity: 0.2;
    filter: alpha(opacity=20);      
}

HTML:

<div id="image">
    <a id="map-part" href="http://www.example.com/"></a>
</div>

Tenga en cuenta que esto solo funcionará para enlaces rectangulares.

Eche un vistazo a jQuery MapHilight.
No estoy seguro de que haga exactamente lo que necesita, pero puede lograrlo con pequeños ajustes.

---

---

Utiliza Nuestro Buscador