Question

我希望有悬停效果，最好是此图像地图上多边形区域周围的边框颜色或发光。以下是我的Javascript：

    <script>
    window.onload = function () {
var ImageMap = function (map, img) {
        var n,
            areas = map.getElementsByTagName('area'),
            len = areas.length,
            coords = [],
            previousWidth = 700;
        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] *= x;
                }
                areas[n].coords = coords[n].join(',');
            }
            previousWidth = img.offsetWidth;
            return true;
        };
        window.onresize = this.resize;
    },
    imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
imageMap.resize();
return;
    }
    </script>

包含我想在悬停时突出显示的部分坐标的HTML：

<div style="width:100%;">
<img id="img_ID" src="http://libraries.adelphi.edu/files/2016/10/Overview-Final.jpg" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">

<area shape="poly" coords="133,309,70,330,68,347,199,392,239,373,193,364,191,342,209,340,209,329" alt="Level S" title="Level S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-S-10-2016.jpg" target="_self" />

<area shape="poly" coords="244,310,200,324,64,286,64,267,146,243,207,257,208,294,241,293" alt="Level 2S" title="Level 2S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-2S-10-2016.jpg" target="_self" />

<area shape="poly" coords="193,344,194,356,350,406,469,343,469,328,319,295,294,319,253,343,236,341" alt="Level C" title="Level C" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-C-10-2016.jpg" target="_self" />

<area shape="poly" coords="188,236,188,252,350,287,673,162,674,153,500,136,355,174,291,167,291,221,240,241,218,236" alt="1st Floor" title="1st Floor" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Floor1-10-2016.jpg" target="_self" />

<area shape="poly" coords="187,233,186,250,60,221,61,208,165,180,204,184,207,226,205,232" alt="Level 3S" title="Level 3S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-3S-10-2016.jpg" target="_self" />

<area shape="poly" coords="237,171,190,180,54,156,56,142,166,116,202,120,204,128,182,127,182,149,205,151,233,158" alt="Level 4S" title="Level 4S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-4S-10-2016.jpg" target="_self" />

<area shape="poly" coords="184,129,184,147,350,172,679,88,680,77,433,58,291,78,291,119,213,131" alt="2nd Floor" title="2nd Floor" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Floor2-10-2016.jpg" target="_self" />

<area shape="poly" coords="235,98,188,104,51,88,51,74,166,51,201,54,201,80,236,83" alt="Level 5S" title="Level 5S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-5S-10-2016.jpg" target="_self" />

</map>

是否有Javascript或CSS解决方案？

这是我尝试实现的一个粗略的例子： http://www.outsharked.com/imagemapster/default.aspx?demos.html

Answer 1

你正试着＆＃34; onMouseOver＆＃34;和＆＃34; onMouseOut＆＃34;。

例如

<map id="map_ID" name="map">

<area shape="poly" coords="133,309,70,330,68,347,199,392,239,373,193,364,191,342,209,340,209,329" alt="Level S" title="Level S" href="http://libraries.adelphi.edu/files/2016/10/Swirbul-Level-S-10-2016.jpg" target="_self"
onMouseOver="if(document.images) document.getElementById('map_ID').src= ' Over Image URL';" 
 onMouseOut="if(document.images) document.getElementById('map_ID').src= 'Out Image URL';" 

 />

悬停图像映射边框

1 个答案: