È possibile creare l'area html della mappa in percentuale?

Question

Ho bisogno di creare qualcosa di simile:

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

dove ogni prodotto nel mio grande immagine è associata ad un tooltip che appare al passaggio del mouse. Ma ho bisogno di questo per lavorare con le immagini a schermo intero .

La prima soluzione che ho pensato (come nell'esempio precedente) è la soluzione map html in cui ognuno riempie esattamente i confini dei miei prodotti. Il problema è che I non può indicare valori precisi per il mio perché la dimensione dell'immagine dipende dallo schermo della finestra.

La soluzione migliore sarebbe la possibilità di impostare valori percentuali per la mia area. È possibile? Qualche altro suggerimento?

Answer 1

Percentuali di mappe immagine non sono un'opzione. Si potrebbe desiderare di ottenere degli script coinvolti (JS) che ricalcoli la posizione esatta sul ridimensionamento delle immagini. Naturalmente, in quella sceneggiatura puoi lavorare con le percentuali, se vuoi.

Answer 2

Si consiglia di utilizzare la libreria JavaScript Raphaël con alcuni CSS. Vedi http://raphaeljs.com/ e Drawing over an image using Raphael.js.

Answer 3

Poiché ciò non può essere eseguito con una semplice manipolazione HTML/CSS, l'unica alternativa è JavaScript, in modo efficace, ricalcolare le coordinate in base al ridimensionamento dell'immagine. A tal fine ho messo insieme una funzione (anche se ci sono due funzioni coinvolte) che raggiunge questo scopo:

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.

Si prega di notare, tuttavia, che questo richiede un browser che implementa window.getComputedStyle() (la maggior parte dei browser correnti, ma solo in IE dalla versione 9 e successive). Inoltre, non ci sono controlli di integrità oltre a garantire che gli argomenti richiesti siano passati nelle funzioni. Questi dovrebbero, tuttavia, essere un inizio se si vuole sperimentare.

Riferimenti:

• 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

C'è un plugin jQuery per questo jQuery RWD Image Maps.

Si potrebbe desiderare di integrare la mia richiesta in sospeso di pull (manualmente) per sostenere "width = 100%": https://github.com/stowball/jQuery-rwdImageMaps/pull/10

Answer 5

soluzione utilizzando Link alternativi:

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> 

dimensioni percentuale può essere detec ted in editor grafici