Czy można utworzyć obszar html mapy w procentach?

Question

muszę stworzyć coś takiego:

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

gdzie każdy produkt w moim wielkim obrazu jest skojarzony z podpowiedzi, które pojawia się przy aktywowaniu myszy. Ale potrzebuję tego do pracy z pełnym ekranem obrazów.

Pierwszym rozwiązaniem, które myślałem (jak powyższy przykład), jest rozwiązanie map html, w którym każdy dokładnie wypełnia granice moich produktów. Problem polega na tym, że I nie może podać dokładnych wartości dla mojej, ponieważ mój rozmiar obrazu zależy od ekranu okna.

Najlepszym rozwiązaniem byłaby możliwość ustawienia wartości dla mojego obszaru na wartości. Czy to możliwe? Jakieś inne sugestie ?

Answer 1

Procenty na mapach graficznych nie są opcją. Możesz potrzebować skryptów (JS), które przeliczą dokładną pozycję na rozmiarach obrazów. Oczywiście w tym skrypcie możesz pracować z procentami, jeśli chcesz.

Answer 2

Rozważ użycie biblioteki JavaScript Raphaël z niektórymi CSS. Zobacz http://raphaeljs.com/ i Drawing over an image using Raphael.js.

Answer 3

Ponieważ nie można tego zrobić za pomocą prostej manipulacji HTML/CSS, jedyną alternatywą jest JavaScript, aby ponownie obliczyć współrzędne w oparciu o zmianę rozmiaru obrazu. W tym celu mam połączyć funkcję (choć tam dwie funkcje związane), która osiąga ten cel:

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.

Należy jednak pamiętać, że wymaga to przeglądarki, która implementuje window.getComputedStyle() (większość obecnych przeglądarek, ale tylko w IE od wersji 9 i nowszych). Ponadto nie ma żadnych kontroli poprawności innych niż zapewnienie, że wymagane argumenty są przekazywane do funkcji. Powinny one jednak być początkiem, jeśli chcesz eksperymentować.

Odniesienia:

• 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

Istnieje wtyczka jQuery dla tego jQuery RWD Image Maps.

może chcesz zintegrować mój oczekującego żądania pull (ręcznie) w celu wspierania "width = 100%": https://github.com/stowball/jQuery-rwdImageMaps/pull/10

Answer 5

alternatywne rozwiązanie przy użyciu linki:

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> 

Wartości procentowe mogą być wykryte edytory graficzne