Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    error: document.image is null or not an object

    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">

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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" .....>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    May 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    error: document.image is null or not an object

    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">

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •