Necesito mostrar un mapa de imagen con aproximadamente 70 áreas en él. El área del mapa de imágenes en el que se encuentra actualmente el cursor del mouse se supone que está resaltada en un color determinado.¿Cómo destaco las partes de un mapa de imagen al pasar el mouse?
¿Es esto posible y, en caso afirmativo, cómo?
Después de utilizarlo en la producción diría que esta es la respuesta: http://plugins.jquery.com/project/maphilight
Usar esto requiere unas pocas líneas de código para implementar esa función para cualquier mapa de imagen.
¿Podemos destacar que siempre aparece en algunas áreas del mapa? Quise decir sin flotar? – gkns
El enlace está muerto, ¿algún enlace nuevo? –
Encontrado esto: http://davidlynch.org/projects/maphilight/docs/ – Maximilian
Sí, esto es posible. He hecho exactamente lo mismo con jquery y el área del mapa de la imagen mouseenter/mouseleave events, pero no con 70 áreas. Solo será más trabajo para ti. Puede considerar cargar las imágenes a través de llamadas ajax en el mouseover, o usando un sprite y posicionamiento para que no tenga que cargar 70 imágenes en el dom.
jQuery:
$(document).ready(function() {
$(".map-areas area").mouseenter(function() {
var idx = $(".map-areas area").index(this);
$(".map-hovers img:eq(" + idx + ")").show();
return false;
}).mouseleave(function() {
$(".map-hovers img").hide();
return false;
});
});
Dónde .map-cierne es un div que tiene todas las imágenes que desee para poner sobre la parte superior de su mapa. Puede colocarlos si es necesario o hacer que la imagen tenga el mismo tamaño que el mapa de imagen, pero con transparencia.
Y algo de HTML a seguir:
NOTA: Observe cómo las líneas de la imagen del mapa de índice con el índice img dentro del contenedor mapa-cierne? TAMBIÉN: El mapa de imagen debe apuntar a un gif transparente y tener la imagen de fondo configurada en la imagen real que desea visualizar. Esta es una cuestión de navegador cruzado: no puedo recordar la razón exacta.
<div id="container">
<img src="/images/trans.gif" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" />
<div class="map-hovers">
<img src="/images/map/sunset-country.png" alt="Sunset Country" />
<img src="/images/map/north-of-superior.png" alt="North of Superior" />
<img src="/images/map/algomas-country.png" alt="Algoma's Country" />
<img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
<img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
<img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
<img src="/images/map/muskoka.png" alt="Muskoka" />
</div>
</div>
<map name="region-map" id="region-map" class="map-areas">
<area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
<area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
<area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
<area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
<area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
<area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
<area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
</map>
Gracias! Como puedo generar esas imágenes, en realidad no es mucho más trabajo. – Maximilian
He estado usando su respuesta para crear un mapa de imagen que resalta varias partes en mouseover, pero no está funcionando del todo bien.Lo que está sucediendo para mí es que las imágenes correctas aparecen cuando hago el mouseover, pero aparecen directamente debajo de la imagen original sobre la que me cierro. Entonces, usando su código como punto de referencia, si muevo mi mouse sobre partes de la imagen '/ images/trans.gif', todas las imágenes correctas aparecen * debajo * en la página, en lugar de aparecer como si la imagen misma (el que tiene el mouse sobre ella) está cambiando. Esperaba que pudieras tener algunas sugerencias/pensamientos? – Monomeeth
No sé si hay una manera fresca de hacerlo, pero se puede tomar su imagen imagen de fondo de un elemento de bloque como, revestirlo de una imagen transparente y su mapa de imagen y luego reemplazar este transparente . la imagen sobre un evento al pasar el ratón con una imagen de la zona se destaca en
en el lado negativo que necesita 70 imágenes de áreas resaltadas
Intenté utilizar la solución de ScottE, pero desafortunadamente eso significaba agregar la imagen de destino como fondo de cuerpo.
Mi solución está muy cerca de él, sino que utiliza las imágenes correctamente
jQuery:
$(document).ready(function() {
$(".map-areas area").mouseenter(function() {
var idx = $(".map-areas area").index(this);
$(".map-hovers img:eq(" + idx + ")").show();
return false;
});
$(".map-hovers img").mouseleave(function() {
$(".map-hovers img").hide();
return false;
});
});
El concepto clave aquí es que una vez que usted entra en el área del mapa, mostrar el mapa-cierne imagen, que luego se convierte en tu capa activa debajo del mouse: simplemente detectar cuando salgas de esa imagen es lo que hace que sea suave.
HTML: (casi lo mismo, no hay necesidad para una imagen trans)
<div id="container">
<img src="/images/full-map.png" width="220" height="238" class="map-trans" alt="Map/Carte" usemap="#region-map" />
<div class="map-hovers">
<img src="/images/map/sunset-country.png" alt="Sunset Country" />
<img src="/images/map/north-of-superior.png" alt="North of Superior" />
<img src="/images/map/algomas-country.png" alt="Algoma's Country" />
<img src="/images/map/ontarios-wilderness.png" alt="Ontario's Wilderness" />
<img src="/images/map/rainbow-country.png" alt="Rainbow Country" />
<img src="/images/map/ontarios-near-north.png" alt="Ontario's Near North" />
<img src="/images/map/muskoka.png" alt="Muskoka" />
</div>
</div>
<map name="region-map" id="region-map" class="map-areas">
<area shape="poly" coords="52,19,53,82,36,114,34,126,26,130,5,121,2,110,7,62" href="#d0" alt="Sunset Country" />
<area shape="poly" coords="93,136,93,113,82,112,77,65,57,51,58,82,41,122,33,133,58,138,74,126" href="#d1" alt="North of Superior" />
<area shape="poly" coords="98,112,118,123,131,149,130,165,108,161,97,138" href="#d2" alt="Algoma's Country" />
<area shape="poly" coords="68,2,100,29,124,33,133,74,155,96,159,145,134,146,121,119,101,110,83,107,83,65,55,45,54,16" href="#d3" alt="Ontario's Wilderness" />
<area shape="poly" coords="151,151,152,167,157,176,152,179,137,178,124,172,133,169,135,150" href="#d4" alt="Rainbow Country" />
<area shape="poly" coords="160,150,170,167,169,173,160,171,155,162,153,149" href="#d5" alt="Ontario's Near North" />
<area shape="poly" coords="173,176,162,177,154,184,167,189,178,183" href="#d6" alt="Muskoka" />
</map>
Oh creo que he encontrado algo agradable que hacer el trabajo para mí: http://plugins.jquery.com/project/ maphilight – Maximilian