html - saber - Mapa de imagen receptivo
html map area (15)
Tengo un mapa de imagen existente en un diseño html receptivo. Las imágenes se escalan según el tamaño del navegador, pero las coordenadas de la imagen son, obviamente, tamaños de píxeles fijos. ¿Qué opciones tengo para cambiar el tamaño de las coordenadas del mapa de imagen?
David Bradshaw escribió una pequeña biblioteca que resuelve este problema. Se puede usar con o sin jQuery.
Disponible aquí: https://github.com/davidjbradshaw/imagemap-resizer
Depende, puedes usar jQuery para ajustar los rangos proporcionalmente, creo. ¿Por qué usas un mapa de imagen por cierto? ¿No puedes usar divisiones de escala u otros elementos para ello?
El siguiente método funciona perfectamente para mí, así que aquí está mi implementación completa:
<img id="my_image" style="display: none;" src="my.png" width="924" height="330" border="0" usemap="#map" />
<map name="map" id="map">
<area shape="poly" coords="774,49,810,21,922,130,920,222,894,212,885,156,874,146" href="#mylink" />
<area shape="poly" coords="649,20,791,157,805,160,809,217,851,214,847,135,709,1,666,3" href="#myotherlink" />
</map>
<script>
$(function(){
var image_is_loaded = false;
$("#my_image").load(function() {
$(this).data(''width'', $(this).attr(''width'')).data(''height'', $(this).attr(''height''));
$($(this).attr(''usemap'')+" area").each(function(){
$(this).data(''coords'', $(this).attr(''coords''));
});
$(this).css(''width'', ''100%'').css(''height'',''auto'').show();
image_is_loaded = true;
$(window).trigger(''resize'');
});
function ratioCoords (coords, ratio) {
coord_arr = coords.split(",");
for(i=0; i < coord_arr.length; i++) {
coord_arr[i] = Math.round(ratio * coord_arr[i]);
}
return coord_arr.join('','');
}
$(window).on(''resize'', function(){
if (image_is_loaded) {
var img = $("#my_image");
var ratio = img.width()/img.data(''width'');
$(img.attr(''usemap'')+" area").each(function(){
console.log(''1: ''+$(this).attr(''coords''));
$(this).attr(''coords'', ratioCoords($(this).data(''coords''), ratio));
});
}
});
});
</script>
Me encontré con el mismo requisito donde, quiero mostrar un mapa de imagen receptivo que puede cambiar de tamaño con cualquier tamaño de pantalla y lo importante es, quiero resaltar esas coordenadas .
Así que probé muchas bibliotecas que pueden cambiar el tamaño de las coordenadas de acuerdo con el tamaño de la pantalla y el evento. Y obtuve la mejor solución (jquery.imagemapster.min.js) que funciona bien con casi todos los navegadores. También lo he integrado con Summer Plgin, que crea un mapa de imágenes.
var resizeTime = 100;
var resizeDelay = 100;
$(''img'').mapster({
areas: [
{
key: ''tbl'',
fillColor: ''ff0000'',
staticState: true,
stroke: true
}
],
mapKey: ''state''
});
// Resize the map to fit within the boundaries provided
function resize(maxWidth, maxHeight) {
var image = $(''img''),
imgWidth = image.width(),
imgHeight = image.height(),
newWidth = 0,
newHeight = 0;
if (imgWidth / maxWidth > imgHeight / maxHeight) {
newWidth = maxWidth;
} else {
newHeight = maxHeight;
}
image.mapster(''resize'', newWidth, newHeight, resizeTime);
}
function onWindowResize() {
var curWidth = $(window).width(),
curHeight = $(window).height(),
checking = false;
if (checking) {
return;
}
checking = true;
window.setTimeout(function () {
var newWidth = $(window).width(),
newHeight = $(window).height();
if (newWidth === curWidth &&
newHeight === curHeight) {
resize(newWidth, newHeight);
}
checking = false;
}, resizeDelay);
}
$(window).bind(''resize'', onWindowResize);
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.imagemapster.min.js"></script>
<img src="https://discover.luxury/wp-content/uploads/2016/11/Cities-With-the-Most-Michelin-Star-Restaurants-1024x581.jpg" alt="" usemap="#map" />
<map name="map">
<area shape="poly" coords="777, 219, 707, 309, 750, 395, 847, 431, 916, 378, 923, 295, 870, 220" href="#" alt="poly" title="Polygon" data-maphilight='''' state="tbl"/>
<area shape="circle" coords="548, 317, 72" href="#" alt="circle" title="Circle" data-maphilight='''' state="tbl"/>
<area shape="rect" coords="182, 283, 398, 385" href="#" alt="rect" title="Rectangle" data-maphilight='''' state="tbl"/>
</map>
Espero ayudar a alguien.
Me encontré con una solución que no usa mapas de imágenes en absoluto, sino más bien etiquetas de anclaje que están absolutamente posicionadas sobre la imagen. El único inconveniente sería que el punto de acceso debería ser rectangular, pero la ventaja es que esta solución no depende de Javascript, solo CSS. Hay un sitio web que puede usar para generar el código HTML para los anclajes: http://www.zaneray.com/responsive-image-map/
Puse la imagen y las etiquetas de anclaje generadas en una etiqueta div posicionada relativamente y todo funcionó perfectamente en el tamaño de la ventana y en mi teléfono móvil.
Para aquellos que no quieren recurrir a JavaScript, aquí hay un ejemplo de corte de imagen:
http://codepen.io/anon/pen/cbzrK
A medida que escala la ventana, la imagen del payaso se escalará en consecuencia, y cuando lo haga, la nariz del payaso seguirá hipervinculada.
Por alguna razón, ninguna de estas soluciones funcionó para mí. He tenido el mejor éxito al usar transformaciones.
transform: translateX(-5.8%) translateY(-5%) scale(0.884);
Similar a la respuesta de Orland aquí: https://.com/a/32870380/462781
Combinado con el código de Chris aquí: https://.com/a/12121309/462781
Si las áreas encajan en una cuadrícula, puede superponerlas mediante imágenes transparentes utilizando un ancho en% que mantenga su relación de aspecto.
.wrapperspace {
width: 100%;
display: inline-block;
position: relative;
}
.mainspace {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
<div class="wrapperspace">
<img style="float: left;" title="" src="background-image.png" width="100%" />
<div class="mainspace">
<div>
<img src="space-top.png" style="margin-left:6%;width:15%;"/>
</div>
<div>
<a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:15%;"></a>
</div>
<div>
<a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:10%;"></a>
<a href="http://www.example.com"><img src="space-company.png" style="width:20%;"></a>
</div>
</div>
</div>
Puede usar un margen en%. Además, las imágenes "espaciales" se pueden colocar una al lado de la otra dentro de un div de tercer nivel.
También puedes usar svg en lugar de imagemap;)
Hubo un tutorial en esta dirección pero el enlace está muerto: http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
- Aquí está jsfiddle con algunos buenos efectos de desplazamiento, descripción y enlaces: http://jsfiddle.net/eLbpmsaj/
.hover_group:hover {
opacity: 1;
}
#projectsvg {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#projectsvg svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" >
//set your background image
<image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080">
</image>
<g class="hover_group" opacity="0">
<a xlink:href="http://www.wooh.be/shop/mobilier/wooh-original-office-home/giroflex-353.html">
<text x="652" y="706.9" font-size="20">First zone</text>
<rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
</a>
</g>
<g class="hover_group" opacity="0">
<a xlink:href="/shop/mobilier/wooh-original-office-home/giroflex-353.html">
<text x="1230.7" y="952" font-size="20">Second zone</text>
<rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
</a>
</g>
</svg>
</figure>
Trabajando para mí (recuerda cambiar 3 cosas en el código):
previousWidth (tamaño original de la imagen)
map_ID (id de tu mapa de imágenes)
img_ID (id de tu imagen)
HTML:
<div style="width:100%;">
<img id="img_ID" src="http://www.gravatar.com/avatar/0865e7bad648eab23c7d4a843144de48?s=128&d=identicon&r=PG" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">
<area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" alt="Bandcamp" title="Bandcamp" />
<area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" alt="Facebook" title="Facebook" />
<area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" alt="Soundcloud" title="Soundcloud" />
</map>
Javascript:
window.onload = function () {
var ImageMap = function (map, img) {
var n,
areas = map.getElementsByTagName(''area''),
len = areas.length,
coords = [],
previousWidth = 128;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split('','');
}
this.resize = function () {
var n, m, clen,
x = img.offsetWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join('','');
}
previousWidth = img.offsetWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById(''map_ID''), document.getElementById(''img_ID''));
imageMap.resize();
return;
}
JSFiddle: http://jsfiddle.net/p7EyT/154/
http://home.comcast.net/~urbanjost/semaphore.html es la página principal de la discusión, y en realidad tiene enlaces a una solución basada en JavaScript para el problema. Recibí un aviso de que HTML admitirá el porcentaje de unidades en el futuro, pero no he visto ningún progreso en esto en bastante tiempo (probablemente ha pasado más de un año desde que recibí el apoyo), por lo que la solución es probablemente valga la pena ver si te sientes cómodo con JavaScript / ECMAScript.
Puede obtener una imagen de mapa receptiva mediante el siguiente enlace
window.onload = function () {
var ImageMap = function (map, img) {
var n,
areas = map.getElementsByTagName(''area''),
len = areas.length,
coords = [],
previousWidth = 128;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split('','');
}
this.resize = function () {
var n, m, clen,
x = img.offsetWidth / previousWidth;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m++) {
coords[n][m] *= x;
}
areas[n].coords = coords[n].join('','');
}
previousWidth = document.body.clientWidth;
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById(''map_ID''), document.getElementById(''img_ID''));
imageMap.resize();
return;
}
<div style="width:100%;">
<img id="img_ID" src="http://www.gravatar.com/avatar/0865e7bad648eab23c7d4a843144de48?s=128&d=identicon&r=PG" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">
<area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" alt="Bandcamp" title="Bandcamp" />
<area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" alt="Facebook" title="Facebook" />
<area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" alt="Soundcloud" title="Soundcloud" />
</map>
Mapas de imágenes receptivas jQuery Plugin por Matt Stow
Para mapas de imágenes receptivos necesitarás usar un plugin:
https://github.com/stowball/jQuery-rwdImageMaps (ya no se mantiene)
O
https://github.com/davidjbradshaw/imagemap-resizer
Ningún navegador importante comprende las coordenadas porcentuales correctamente, y todas interpretan las coordenadas porcentuales como coordenadas de píxeles.
http://www.howtocreate.co.uk/tutorials/html/imagemaps
Y también esta página para probar si los navegadores implementan