代码之家 › 专栏 › 技术社区 › Rune Caster

javascript图像映射大小调整问题

imagemap html jquery javascript

0

Rune Caster · 技术社区 · 9 年前

我正在尝试使用动态调整大小。我知道一些Javascript,但对它很陌生。我得到以下错误:index。html:20未捕获的类型错误:无法读取null的属性“getElementsByTagName”

此错误适用于以下行:areas=map.getElementsByTagName('area'),

谢谢Teemu的剧本 Dynamically resizing Image-maps and images

<html>

<head>
<link rel="stylesheet" type="text/css" href="PB.css">

</head>

<body>

<script>

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 1280;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / 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 = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('planetbobmap'));
    imageMap.resize();
    return;
}

</script>

<img src="Planet Bob.jpg" alt="PlanetBob" usemap="#planetbobmap" border="0" width="1280" height="720" />
<map name="planetbobmap">
    <area shape="rect" coords="190,140,435,200" alt="skills" href="Skills.jpg" target="_blank" />
    <area shape="rect" coords="890,140,1250,200" alt="projects" href="Projects.jpg" target="_blank" />
    <area shape="rect" coords="50,460,440,525" alt="schooling" href="Schooling.jpg" target="_blank" />
    <area shape="rect" coords="900,460,1230,525" alt="contact" href="Contact.jpg" target="_blank" />
    <area shape="circle" coords="652,352,162" alt="Resume" href="Robert J Norton Resume.pdf" target="_blank" />
</map>

</body>

</html>

1 回复 | 直到 8 年前

1

0

Deep 9 年前

我看到的第一个问题是,无法使用document.getElementById('planetbobmap')访问map元素

因为在map元素中没有定义属性id。

尝试此html更改。

<map id = "planetbobmap" name="planetbobmap">