error: document.image is null or not an object

davidweb · 05-04-2006, 10:09 AM

I am realtively new to java script, so my apologise.

I am trying to create an image map of regional map. i have created the image map and would now like to have the areas contained in it highlighted with a mouse over. i have come to the conclusion that i need to do an image swap for each area?

i have used the code supplied in the book "web design in a nutshell"

but still cant get it to go, keeps coming up with the same error.

document.image is null or not an object.

anyone out there able to help? please.

code as below:
<script language = "javascript">



</script>

<map name="FPMap1">

<area alt="Hawkes Bay" href="hawkes_bay.htm" color="#FFFFFF" shape="polygon" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" coords="447, 132, 392, 79, 376, 93, 356, 115, 331, 128, 289, 136, 320, 222, 341, 232, 338, 257, 365, 272, 381, 292, 380, 320, 402, 333, 409, 330, 417, 304, 440, 287, 444, 273, 444, 252, 466, 216, 475, 187, 455, 180, 450, 168, 453, 153, 444, 149" name="Hawkes Bay">

<area alt="Gisborne" coords="394, 77, 449, 130, 474, 108, 489, 90, 516, 82, 540, 81, 530, 31, 483, 36, 440, 46, 417, 54" shape="polygon" href="gisborne.htm">

<area alt="MidCentral" href="Midcentral.htm" shape="polygon" coords="192, 390, 209, 342, 211, 304, 250, 273, 279, 240, 294, 221, 322, 227, 337, 236, 333, 259, 374, 288, 374, 326, 396, 337, 408, 340, 400, 347, 374, 374, 363, 386, 344, 374, 317, 390, 296, 390, 287, 378, 270, 385, 253, 381, 233, 387, 224, 399, 223, 409, 205, 406, 195, 388">

<area href="wairairapa.htm" shape="polygon" coords="189, 394, 198, 391, 206, 409, 226, 412, 231, 396, 249, 385, 268, 388, 286, 383, 297, 393, 320, 394, 345, 378, 360, 388, 355, 415, 343, 425, 338, 439, 328, 448, 328, 463, 317, 471, 305, 490, 298, 495, 254, 500, 212, 487, 186, 463, 163, 440, 172, 434, 179, 413">

<area alt="Whanganui" coords="212, 302, 198, 270, 167, 234, 137, 232, 182, 126, 210, 142, 244, 142, 288, 138, 313, 216, 289, 217, 271, 236, 255, 259, 239, 279" shape="polygon" href="wanganui.htm">

<area alt="Taranaki" coords="178, 125, 151, 94, 101, 66, 75, 70, 45, 78, 21, 97, 3, 113, 4, 148, 26, 175, 57, 181, 77, 187, 96, 210, 126, 229, 138, 232, 136, 233, 145, 212" shape="polygon" href="taranaki.htm">
</map>
<img name="image1" border="0" src="imagemap.jpg" width="551" height="567" usemap="#FPMap1">

Kor · 05-04-2006, 11:53 AM

use id instead of name ant type intead of deprecated language. Don't use eval()

<script type="text/javascript">
var pics=['mapHawkesbay.jpg','imagemap.jpg'];
function roll(id,w){
document.getElementById(id).src=pics[w];
}
</script>
...
... onmouseover="roll('img1',0)" onmouseout="roll('img1',1)"...
...
<img id="img1" border="0" src="imagemap.jpg" .....>

davidweb · 05-04-2006, 09:48 PM

Thanks for your reply.

i think i understand what you are saying, however i need to change several images in the same map, how do i do that???

do i have to give each area and id?

any help gratefully received?

<script language = "javascript">



</script>

<map name="FPMap1">

<area alt="Hawkes Bay" href="hawkes_bay.htm" color="#FFFFFF" shape="polygon" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" coords="447, 132, 392, 79, 376, 93, 356, 115, 331, 128, 289, 136, 320, 222, 341, 232, 338, 257, 365, 272, 381, 292, 380, 320, 402, 333, 409, 330, 417, 304, 440, 287, 444, 273, 444, 252, 466, 216, 475, 187, 455, 180, 450, 168, 453, 153, 444, 149" name="Hawkes Bay">

<area alt="Gisborne" coords="394, 77, 449, 130, 474, 108, 489, 90, 516, 82, 540, 81, 530, 31, 483, 36, 440, 46, 417, 54" shape="polygon" href="gisborne.htm" onMouseOver="imgOn('img2')" onMouseOut="imgOff('img1')">

<area alt="MidCentral" href="Midcentral.htm" onMouseOver="imgOn('img3')" onMouseOut="imgOff('img3')" shape="polygon" coords="192, 390, 209, 342, 211, 304, 250, 273, 279, 240, 294, 221, 322, 227, 337, 236, 333, 259, 374, 288, 374, 326, 396, 337, 408, 340, 400, 347, 374, 374, 363, 386, 344, 374, 317, 390, 296, 390, 287, 378, 270, 385, 253, 381, 233, 387, 224, 399, 223, 409, 205, 406, 195, 388">

<area href="wairairapa.htm" onMouseOver="imgOn('img4')" onMouseOut="imgOff('img4')" shape="polygon" coords="189, 394, 198, 391, 206, 409, 226, 412, 231, 396, 249, 385, 268, 388, 286, 383, 297, 393, 320, 394, 345, 378, 360, 388, 355, 415, 343, 425, 338, 439, 328, 448, 328, 463, 317, 471, 305, 490, 298, 495, 254, 500, 212, 487, 186, 463, 163, 440, 172, 434, 179, 413">

<area alt="Whanganui" coords="212, 302, 198, 270, 167, 234, 137, 232, 182, 126, 210, 142, 244, 142, 288, 138, 313, 216, 289, 217, 271, 236, 255, 259, 239, 279" shape="polygon" href="wanganui.htm">

<area alt="Taranaki" coords="178, 125, 151, 94, 101, 66, 75, 70, 45, 78, 21, 97, 3, 113, 4, 148, 26, 175, 57, 181, 77, 187, 96, 210, 126, 229, 138, 232, 136, 233, 145, 212" shape="polygon" href="taranaki.htm">
</map>
<img name="image1" border="0" src="imagemap.jpg" width="551" height="567" usemap="#FPMap1">

felgall · 05-04-2006, 10:41 PM

Instead of

eval(imgName + "on.src")

use

window[imgName+'on].src

You also need to define the various images on the page that the code is updating (you didn't include that code in the HTML you posted as there are no <img> tags specified in your post and they are what the code will update). I assume that the error you are asking about is because you didn't include the images in your page.