更现代的图像地图？

Question

随着JavaScript / HTML5的所有最新进展，我们很高兴认为有更现代的方式来实现图像映射。我知道你可以为标签设置一个map属性，但我不认为这支持翻转（在该区域附近）的格式良好的工具提示。我的要求实际上只是工具提示，图像中某个区域的onClick / doubleClick操作。

我在这里发现的类似事情的最后一个问题来自5年前。

理想情况下，我想使用纯js / html / css而不使用JQuery插件等，虽然我看到有一些可用。

Answer 1

响应式SVG解决方案或经典图像映射

考虑到关于SVG的Paulie_D's comment之后，我使用SVG编写了一个替代经典图像映射的替代方案。两者都运行良好，但SVG版本在响应性方面明显胜出。两个版本都使用href - 属性在锚点和相应的工具提示之间建立连接。这两个解决方案都可以使用vanilla JavaScript，而无需额外的库。

SVG版本

<强>优点

• 响应
• 可以使用JavaScript轻松放置工具提示

<强> HTML

<svg id="map" version="1.1" viewBox="0 0 300 300">
    <image width="300" height="300" xlink:href="http://placehold.it/300"/>

    <a xlink:href="#t_1">
        <rect x="50" y="50" width="50" height="50" />
    </a>

    <a xlink:href="#t_2">
        <rect x="150" y="150" width="50" height="50" />
    </a>
</svg>

<div class="t" id="t_1">Tooltip 1</div>
<div class="t" id="t_2">Tooltip 2</div>

<强> CSS

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}

svg {
    display: block;
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
}

svg rect {
    fill: white;
    opacity: 0.1;
    transition: all 0.2s linear;
}

svg rect:hover {
    opacity: 0.8;
}

.t {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.4s linear;
}

.t.active {
    opacity: 1;
}

<强>的JavaScript *

var map = document.getElementById('map');
var areas = map.getElementsByTagName('a');
var offset = { left: 30, top: 70 };

for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = function() {
        // get child element
        var c = this.firstElementChild;
        // get tooltip
        var t = document.getElementById(this.getAttribute('xlink:href').substr(1));
        // set styles
        t.style.left = (map.offsetLeft + parseInt(c.getAttribute('x')) + offset.left) + 'px';
        t.style.top = (map.offsetTop + parseInt(c.getAttribute('y')) + offset.top) + 'px';
        // show it
        t.classList.toggle('active');
    }
    areas[i].onmouseout = function() {
        // get tooltip
        var t = document.getElementById(this.getAttribute('xlink:href').substr(1));
        // hide it
        t.classList.toggle('active');
    }
}

备注

• 可以改善定位，只是为了显示方向

<强>演示

Try before buy

经典图像地图版

<强> HTML

<img src="http://placehold.it/300" alt="" usemap="#map">
<map id="map" name="map">
    <area shape="rect" coords="0,0,50,50" href="#t_1" alt="Tip 1" data-left="80px" data-top="80px" />
    <area shape="rect" coords="100,100,150,150" href="#t_2" alt="Tip 2" data-left="180px" data-top="180px" />
</map>

<div class="t" id="t_1">Tooltip 1</div>
<div class="t" id="t_2">Tooltip 2</div>

<强> CSS

.t {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: opacity 0.4s linear;
}

.t.active {
    opacity: 1;
}

<强>的JavaScript *

var areas = document.getElementById('map').children;

for (var i = 0; i < areas.length; i++) {
    areas[i].onmouseover = function() {
        var t = document.getElementById(this.hash.substr(1));
        t.style.left = this.dataset.left;
        t.style.top = this.dataset.top;
        t.classList.toggle('active');
    }
    areas[i].onmouseout = function() {
        var t = document.getElementById(this.hash.substr(1));
        t.classList.toggle('active');
    }
}

备注

• 使用data-* - 属性附加位置，将JavaScript分离（不幸的是you can't use offsetLeft/Top并根据area - 元素确定位置） - 然而，您可以使用coords - 属性
• 可以改进JavaScript代码（例如存储工具提示，而不是一直重新查询它们）

<强>演示

Try before buy

^{*在两个示例中，JavaScript都可以改进，例如将工具提示元素存储在变量中，而不是一直重新查询它们。 功能}