Можно ли создать карту HTML области в процентах?

Мне нужно создать что-то вроде этого:

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

где каждый продукт в моем большом изображении связан с подсказкой, которая появляется при наведении курсора мыши. Но мне нужно с этим работатьfullscreen images.

Первое решение, которое я подумал (как пример выше), этоmap html решение, где каждый заполняет точно границы моих продуктов. Проблема в том, что яcan't указыватьprecise values для моего, потому что мой размер изображения зависит от экрана окна.

Лучшим решением будет возможность установитьpercentage values для моей области. Это возможно? Любые другие предложения?

Ответы на вопрос(7)

Полезно, когда вы хотите отобразить масштабированное изображение в процентах и т. Д.

Может использоваться с или без jQuery.

https://github.com/davidjbradshaw/imagemap-resizer

и вы можете видеть это работает на.

http://davidjbradshaw.com/imagemap-resizer/example/

вы захотите задействовать некоторые сценарии (JS), которые пересчитывают точную позицию при изменении размера изображений. Конечно, в этом скрипте вы можете работать с процентами, если хотите.

что это старый вопрос, но, возможно, кому-то это понадобится в какой-то момент, как и мне. Я изменил @David Thomas & apos; Ответьте немного, чтобы этот маленький кусочек JS мог обрабатывать будущие пересчеты:

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++) {
            // Save original coordinates for future use
            var originalCoords = areas[i].getAttribute('data-original-coords');
            if (originalCoords == undefined) {
                originalCoords = areas[i].getAttribute('coords');
                areas[i].setAttribute('data-original-coords', originalCoords);
            }

            newCoords = originalCoords.replace(/(\d+)/g,function(a){
                return Math.round(a * multiplier);
            });
            areas[i].setAttribute('coords',newCoords);
        }
    }
}

function remapImage() {
    var imgElement = document.getElementsByTagName('img')[0];
    remap(imgElement);
}

// Add a window resize event listener
var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

addEvent(window, "resize", remapImage);

ML / CSS, единственной альтернативой является JavaScript для эффективного пересчета координат на основе изменения размера изображения. С этой целью я собрал функцию (хотя задействованы две функции), которая достигает этой цели:

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.

Обратите внимание, однако, что это требует браузера, который реализуетwindow.getComputedStyle() (большинство современных браузеров, но только в IE от версии 9 и выше). Кроме того, нет никаких проверок работоспособности, кроме проверки того, что необходимые функции переданы в функции. Это должно быть началом, если вы хотите экспериментировать.

Рекомендации:

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.

jQuery RWD Image Maps.

Возможно, вы захотите интегрировать мой ожидающий запрос извлечения (вручную) для поддержки & quot; width = 100% & quot ;:https://github.com/stowball/jQuery-rwdImageMaps/pull/10

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>

Процентные размеры могут быть обнаружены в графических редакторах

ВАШ ОТВЕТ НА ВОПРОС