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

11

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

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

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

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

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

хорошо, если вы назначаете различное изображение для каждого размера экрана, вы должны иметь возможность использовать фиксированные размеры для карты.areas. см. ответ @ Baszz. Eliran Malka
изображения имеют определенные размеры, зачем использовать процент? при условии, что вы не растягиваете изображения для заполнения экрана (что считается плохой практикой). Eliran Malka
Я думаю, что он делает что-то более плавное, а-ляsrobbin.com/jquery-plugins/backstretch technoTarek
exaclty @technoTarek. Но я думаю, что я напишу какое-нибудь хитрое решение JS, как сказал Бэззз. Stefano Ortisi
Мои изображения определенно растягиваются, чтобы соответствовать всему окну браузера. И если вы тщательно управляете своими изображениями (например, предоставляя другую версию, используя медиа-запросы или другие методы), то это не плохая практика. Stefano Ortisi

Ваш Ответ

7   ответов
0
1

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

1

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

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

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

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

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

2

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.
0

что это старый вопрос, но, возможно, кому-то это понадобится в какой-то момент, как и мне. Я изменил @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);
4

jQuery RWD Image Maps.

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

12

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>

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

Странно, но в jsfiddle это работает только тогда, когда .image {position: absolute; }
Я считаю, что вам необходимо закрыть каждый из ваших тегов 3 A с помощью тега & lt; / a & gt; чтобы заставить это работать.
Это сработало очень хорошо, спасибо, что включили источник.
Конечно, извините, моя ошибка.

Похожие вопросы