¿Es posible crear un área de mapa html en porcentaje?

Question

Necesito crear algo como esto:

http://www.mrporter.com/journal/journal_issue71/2#2

donde cada producto en mi imagen grande se asocia con un texto de ayuda que aparece en vuelo estacionario ratón. Pero necesito que esto funcione con las imágenes de pantalla completa .

La primera solución que pensé (como el ejemplo anterior) es la solución de mapa html donde cada uno llena exactamente los límites de mis productos. El problema es que I no puede indicar valores precisos para mí porque el tamaño de mi imagen depende de la ventana de la pantalla.

La mejor solución sería la posibilidad de establecer valores porcentuales para mi área. ¿Esto es posible? Cualquier otra sugerencia ?

Answer 1

Los porcentajes en los mapas de imágenes no son una opción. Es posible que desee obtener algún script involucrado (JS) que vuelva a calcular la posición exacta en el tamaño de las imágenes. Por supuesto, en esa secuencia de comandos puede trabajar con porcentajes si lo desea.

Answer 2

Considere utilizar la Biblioteca de JavaScript Raphaël con algunos CSS. Ver http://raphaeljs.com/ y Drawing over an image using Raphael.js.

Answer 3

Como esto no se puede hacer con la manipulación simple de HTML/CSS, la única alternativa es JavaScript para, de hecho, recalcular las coordenadas basadas en el cambio de tamaño de la imagen. Con este fin he juntado una función (aunque hay dos funciones implicadas) que logra este fin:

function findSizes(el, src) { 
    if (!el || !src) { 
     return false; 
    } 
    else { 
     var wGCS = window.getComputedStyle, 
      pI = parseInt, 
      dimensions = {}; 
     dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10); 
     var newImg = document.createElement('img'); 
     newImg.src = src; 
     newImg.style.position = 'absolute'; 
     newImg.style.left = '-10000px'; 
     document.body.appendChild(newImg); 
     dimensions.originalWidth = newImg.width; 
     document.body.removeChild(newImg); 
     return dimensions; 
    } 
} 

function remap(imgElem) { 
    if (!imgElem) { 
     return false; 
    } 
    else { 
     var mapName = imgElem 
      .getAttribute('usemap') 
      .substring(1), 
      map = document.getElementsByName(mapName)[0], 
      areas = map.getElementsByTagName('area'), 
      imgSrc = imgElem.src, 
      sizes = findSizes(imgElem, imgSrc), 
      currentWidth = sizes.actualWidth, 
      originalWidth = sizes.originalWidth, 
      multiplier = currentWidth/originalWidth, 
      newCoords; 

     for (var i = 0, len = areas.length; i < len; i++) { 
      newCoords = areas[i] 
       .getAttribute('coords') 
       .replace(/(\d+)/g,function(a){ 
        return Math.round(a * multiplier); 
       }); 
      areas[i].setAttribute('coords',newCoords); 
     } 
    } 
} 

var imgElement = document.getElementsByTagName('img')[0]; 

remap(imgElement);​ 

JS Fiddle demo.

Sin embargo, tenga en cuenta que esto requiere un navegador que implemente window.getComputedStyle() (la mayoría de los navegadores actuales, pero solo en IE de la versión 9 y superior). Además, no hay verificaciones de cordura que no sean garantizar que los argumentos necesarios pasen a las funciones. Sin embargo, estos deberían ser un comienzo si quieres experimentar.

Referencias:

• document.body.
• document.createElement().
• document.getElementsByName().
• document.getElementsByTagName().
• element.getAttribute().
• element.setAttribute().
• element.style.
• Math.round().
• node.appendChild().
• node.removeChild().
• parseInt().
• string.replace().
• string.substring().
• window.getComputedStyle.

Answer 4

Hay un complemento jQuery para este jQuery RWD Image Maps.

Es posible que desee integrar mi solicitud pendiente tracción (manual) para apoyar "width = 100%": https://github.com/stowball/jQuery-rwdImageMaps/pull/10

Answer 5

solución utilizando enlaces alternativos:

CSS:

.image{ 
    position: relative; 
} 
.image a{ 
    display: block;  
    position: absolute; 
} 

HTML:

<div class="image"> 
    <img src="image.jpg" alt="image" /> 
    <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a> 
    <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a> 
    <a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"></a> 
</div> 

Las dimensiones del porcentaje se pueden detectar ted en los editores gráficos