...

View Full Version : error: document.image is null or not an object



davidweb
05-04-2006, 11: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">

<!--
if (document.images) {

//"On" images
img1on = new Image();
img1on.src = "mapHawkesbay.jpg";

//"Off" images

img1off = new Image();
img1off.src = "imagemap.jpg";


}
function imgOn(imgName) {
if (document.images) {
document.images[imgName].src = eval(imgName + "on.src");
}
}
function imgOff(imgName) {
if (document.images) {
document.images[imgName].src = eval(imgName + "off.src");
}
}
//-->

</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, 12:53 PM
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, 10: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">

<!--
if (document.images) {

//"On" images
img1on = new Image();
img1on.src = "mapHawkesbay.jpg";
img2on = new Image();
img2on.src = "mapwairaiarapa.jpg";
img3on = new Image();
img3on.src = "mapGisborne.jpg";
//"Off" images

img1off = new Image();
img1off.src = "imagemap.jpg";


}
function imgOn(imgName) {
if (document.images) {
document.images[imgName].src = eval(imgName + "on.src");
}
}
function imgOff(imgName) {
if (document.images) {
document.images[imgName].src = eval(imgName + "off.src");
}
}
//-->

</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, 11: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum