Question

我的问题与问题Dynamically resizing Image-maps and images有关。 Teemu的解决方案非常有用，我已根据自己的需要进行了调整。我的版本也在jsfiddle。

我尝试将此解决方案应用于我的，这可以在鼠标结束时突出显示地图。您可以查看this link，但我无法执行此操作。

有人解决这个问题吗？我正在尝试动态调整图像映射和图像的大小+在鼠标悬停时突出显示地图的功能。该解决方案需要适应所有屏幕尺寸（智能手机和台式机）。

HTML标记：

<div style="width:100%;">
    <img id="img_ID" src="http://credicim.graphicom.tm.fr/images/credicim/map/CARTE-FRANCE-fond-gris-plus-large.png" usemap="#m_CARTEFRANCEfondgrispluslarge" border="0" width="100%" alt="" />
</div>

<map id="map_ID" name="m_CARTEFRANCEfondgrispluslarge">
    <area shape="poly" coords="404,351,404,356,402,361,409,361,416,363,420,361,431,362,437,357,433,353,429,354,428,342,433,338,434,330,431,325,425,306,427,303,425,298,418,292,415,286,412,283,413,281,410,277,404,274,398,275,391,273,383,267,379,272,372,273,373,279,368,282,362,279,361,268,357,270,355,276,358,286,353,288,342,285,341,281,331,280,326,275,324,268,320,270,317,274,317,278,313,280,312,281,311,282,309,283,309,285,308,287,309,289,310,292,312,294,315,298,318,301,319,303,321,305,320,306,321,308,322,309,323,309,324,309,326,314,328,317,329,320,330,323,330,327,331,332,332,334,335,338,336,338,335,338,333,334,334,334,335,335,335,336,337,339,341,342,343,343,344,343,346,343,347,344,347,345,346,344,346,344,344,344,344,344,343,344,343,345,345,345,345,346,348,346,350,347,354,348,358,350,358,353,359,355,363,356,366,355,370,357,371,361,372,362,373,362,373,361,373,361,372,359,372,358,374,360,376,364,377,364,378,366,379,366,378,364,377,362,377,362,378,362,379,361,382,359,383,360,386,361,387,360,388,360,389,360,395,357,404,351" href="contacts/vos-conseillers-en-vendee-85.html" title="Vendée (85)" alt="Vendée (85)" >
    <area shape="poly" coords="331,280,341,281,342,285,353,288,358,286,355,276,357,270,361,268,362,279,368,282,373,279,372,273,379,272,383,267,384,265,390,254,381,238,390,233,400,233,407,236,414,233,414,227,411,219,395,217,391,212,394,209,407,207,407,202,397,197,396,192,392,187,393,181,382,173,375,172,374,177,360,182,355,188,340,186,331,186,326,187,323,190,321,193,320,196,319,203,314,208,306,205,303,210,292,213,292,213,291,213,290,213,293,214,293,216,292,217,290,216,291,216,290,214,289,214,287,216,285,216,283,218,280,218,279,219,280,220,283,221,284,223,283,227,283,229,283,230,284,229,284,227,285,227,286,228,287,228,287,229,286,230,285,230,286,231,286,232,283,232,282,230,280,230,280,231,281,232,285,234,287,234,288,236,289,236,290,236,290,235,291,235,292,234,295,235,297,237,298,239,299,240,301,241,302,240,305,238,307,237,310,234,311,233,313,232,316,232,319,233,327,233,332,235,333,237,336,238,338,240,340,243,342,245,347,246,352,249,357,248,352,249,349,249,345,247,340,244,335,243,333,241,326,238,325,236,323,235,320,236,317,237,315,236,312,238,312,240,311,242,311,242,312,248,310,250,309,249,306,250,304,252,304,253,306,253,310,254,314,257,320,260,321,263,323,265,324,268,326,275,331,280,331,280" href="contacts/vos-conseillers-en-loire-atlantique-44.html" title="Loire Atlantique (44)" alt="Loire Atlantique (44)" >
    <area shape="poly" coords="409,185,414,183,422,188,426,186,429,188,441,192,449,191,456,184,453,180,463,175,463,172,467,171,474,166,469,161,467,155,475,154,479,140,486,138,483,121,487,114,499,114,498,108,493,108,491,101,492,95,488,92,484,96,475,101,470,98,466,98,464,100,458,103,455,104,454,105,450,106,449,101,445,102,445,105,442,106,439,102,435,102,434,95,426,93,415,96,412,106,415,113,410,123,413,142,412,148,414,155,404,164,405,168,396,178,399,183,409,185" href="contacts/votre-conseiller-en-mayenne-53.html" title="Mayenne (53)" alt="Mayenne (53)" >
    <area shape="poly" coords="342,106,339,107,339,111,334,112,331,111,321,116,318,122,316,122,314,125,312,125,311,129,314,136,318,135,319,138,311,142,309,147,322,148,327,155,322,160,323,167,329,164,332,168,324,175,327,178,327,181,322,183,323,190,326,187,331,186,340,186,355,188,360,182,374,177,375,172,382,173,393,181,405,168,404,164,414,155,412,148,413,142,410,123,415,113,412,106,415,96,413,92,406,91,400,89,394,96,382,91,381,82,378,76,371,76,360,76,359,76,359,75,357,75,355,73,355,70,355,66,357,65,356,63,357,63,357,62,356,63,355,63,354,64,351,64,350,63,350,62,350,62,349,63,348,63,347,64,346,64,345,65,345,66,344,67,342,66,342,66,342,68,341,69,342,72,343,72,342,73,344,73,345,75,344,75,344,74,343,74,344,77,344,78,344,80,345,80,346,81,347,82,346,82,346,83,347,84,347,87,342,106,342,106" href="contacts/votre-conseiller-en-ile-et-vilaine-35.html" title="Ile et Vilaine (35)" alt="Ile et Vilaine (35)" >
</map>

JavaScript：

window.onload = function () {
    var ImageMap = function (map, img) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 904;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = img.offsetWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] = Math.round(parseInt(coords[n][m], 10) * x);
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
    imageMap.resize();
    return;
}

Answer 1

目前maphighlight.js不支持动态调整大小，但另一种选择是......

http://www.outsharked.com/imagemapster/default.aspx?what.html

动态调整图像映射和图像的大小+ maphilight.min.js

1 个答案: