jquery - javascript image map resizing issue -
i trying use dynamic resize. know javascript new @ it. getting following error: index.html:20 uncaught typeerror: cannot read property 'getelementsbytagname' of null
this error line: areas = map.getelementsbytagname('area'),
thanks teemu script dynamically resizing image-maps , 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; (n = 0; n < len; n++) { coords[n] = areas[n].coords.split(','); } this.resize = function () { var n, m, clen, x = document.body.clientwidth / previouswidth; (n = 0; n < len; n++) { clen = coords[n].length; (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>
the first problem see is, can not access map element using document.getelementbyid('planetbobmap')
since in map element attribute id not defined.
try html change.
<map id = "planetbobmap" name="planetbobmap">
Comments
Post a Comment