javascript 图片映射大小调整问题
javascript image map resizing issue
我正在尝试使用动态调整大小。我知道一些 Javascript 但我很陌生。我收到以下错误:index.html:20 Uncaught TypeError: Cannot read 属性 'getElementsByTagName' of null
此错误针对以下行: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>
我看到的第一个问题是,您无法使用 document.getElementById('planetbobmap')
访问地图元素
因为地图元素属性 id 没有定义。
试试这个 html 更改。
<map id = "planetbobmap" name="planetbobmap">
我正在尝试使用动态调整大小。我知道一些 Javascript 但我很陌生。我收到以下错误:index.html:20 Uncaught TypeError: Cannot read 属性 'getElementsByTagName' of null
此错误针对以下行: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>
我看到的第一个问题是,您无法使用 document.getElementById('planetbobmap')
访问地图元素因为地图元素属性 id 没有定义。
试试这个 html 更改。
<map id = "planetbobmap" name="planetbobmap">