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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover problems - document null or not an object

    I'm having problems with a rollover script. It works fine in one page but in another page, the exact same script won't work.

    The problem seems to be with the document[imgName] - it keeps telling me that it's null or not an object:
    document[imgName].src = butOn;
    }
    }
    function button_off ( imgName)
    {
    if (version == "n4" | | version == "e4")
    {
    butOff = eval ( imgName + "_off.src");
    document[imgName].src=butOff;

    Please help - thanks

    Jo

  • #2
    New Coder
    Join Date
    Jul 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is it's references an object in the document that probably doesn't exist. It's probably an image. Make this modification.

    document.images[imgName].src = butOn;
    }
    }
    function button_off ( imgName)
    {
    if (version == "n4" | | version == "e4")
    {
    butOff = eval ( imgName + "_off.src");
    document.images[imgName].src=butOff;

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried that and it still didn't work. Would it help if I posted the full script?

    Thanks
    Jo

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Always!

    You can reference named images as document[image_name] or document.images[image_name] - there's no difference in the major browsers. Make sure the images are named, not id'd.

  • #5
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here you go, see if you can get any sense out of it!!

    <SCRIPT language="javascript">
    browserName=navigator.appName;
    browserVer=parseInt (navigator.appVersion);

    version = "n2"
    if (browserName == "Netscape" && browserVer >=4 ) version = "n4"
    if (browserName == "Microsoft Internet Explorer" && browserVer >=4 ) version="e4"

    if (version == "n4" || version == "e4" )
    {

    square1_on=new Image ( 69, 19 );
    square1_on.src="images/square1_on.gif";
    square2_on=new Image ( 69, 19 );
    square2_on.src="images/square2_on.gif";
    square3_on=new Image ( 69, 19);
    square3_on.src="images/square3_on.gif";

    square1_off=new Image ( 69, 19 );
    square1_off.src="images/square1_off.gif";
    square2_off=new Image ( 69, 19 );
    square2_off.src="images/square2_off.gif";
    square3_off=new Image ( 69, 19);
    square3_off.src="images/square3_off.gif";
    }
    function button_on ( imgName )
    {
    if (version == "n4" || version == "e4")
    {
    butOn = eval ( imgName + "_on.src");
    document [imgName].src = butOn;
    }
    }
    function button_off ( imgName)
    {
    if (version == "n4" || version == "e4")
    {
    butOff = eval ( imgName + "_off.src");
    document [imgName].src = butOff;
    }
    }
    </SCRIPT>
    </head>
    <body bgcolor="#009C9C" text="4A293A" link="ffffff" alink="ffffff" vlink="4A293A">
    <center>
    <table cellpadding=0 cellspacing=0 border="0" width=98% height=98%><tr>
    <td align=right valign=top height="123">
    <table cellpadding=0 cellspacing=0 border="0">
    <tr>
    <td>
    <table cellspacing=0 cellpadding=0 border=0 width="364">
    <tbody>
    <tr>
    <td width="42"><a onmouseover="button_on('square1'); return true" onmouseout="button_off('square1'); return true" a href="index.html"><img src="images/home.gif" width="37" height="20" border="0"></a></td>
    <td width="57"><a onmouseover="button_on('square2'); return true" onmouseout="button_off('square2'); return true" a href="features.htm"><img src="images/features.gif" width="50" height="20" border="0"></a></td>
    <td width="53"><a onmouseover="button_on('square3'); return true" onmouseout="button_off('square3'); return true" a href="reviews.html"><img src="images/reviews.gif" width="47" height="20" border="0"></a></td>
    <td width="34"><a onmouseover="button_on('square1'); return true" onmouseout="button_off('square1'); return true" a href="quiz.html"><img src="images/quiz.gif" width="30" height="20" border="0"></a></td>
    <td width="85"><a onmouseover="button_on('square2'); return true" onmouseout="button_off('square2'); return true" a href="notice.html"><img src="images/notice.gif" width="81" height="20" border="0"></a></td>
    <td width="92"><a onmouseover="button_on('square1'); button_on('square2'); button_on('square3'); return true" onmouseout="button_off('square1'); button_off('square2'); button_off('square3'); return true" a href="contact.html"><img src="images/contact.gif" width="72" height="20" border="0"></a></td>
    </tr>


    Jo

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The images in the HTML aren't named as they should be:

    <td width="42"><a onmouseover="button_on('square1'); return true" onmouseout="button_off('square1'); return true" a href="index.html"><img src="images/home.gif" name="square1" width="37" height="20" border="0"></a></td>

    And I stress my other suggestion:

    function button_on ( imgName )
    {
    if (version == "n4" || version == "e4")
    {
    butOn = eval ( imgName + "_on.src");
    document.images [imgName].src = butOn;
    }
    }
    function button_off ( imgName)
    {
    if (version == "n4" || version == "e4")
    {
    butOff = eval ( imgName + "_off.src");
    document.images [imgName].src = butOff;
    }
    }


  •  

    Posting Permissions

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