dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Getting A Null Error when trying to do image rollover

  1. #1
    Join Date
    Dec 2011
    Posts
    10

    Getting A Null Error when trying to do image rollover

    Hey

    Here is my HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Ultimate Deck LTD. Photos</title>



    <link href="css/ultimate_deck_inc.css" rel="stylesheet" type="text/css" />

    <meta name="description" content="The decks we do are WATERPROOFED to withstand the harsh weather conditions of BC\'s west coast.The membrane we use is a shield of armour that protects its base from rot. Our team is powerful, our motive is unstoppable, and our work is superior." />
    <meta name="keywords" content="ultimate deck, waterproofed, waterproofing, vinyl deck, Ladner, Tsawwaseen, White Rock, Vancouver, Surrey, Richmond, Burnaby, Tri-Cities, New Westminster, Langley, Maple Ridge, Abbotsford, Squamish, Whistler, railing membrane,contact,services,about,faq,photos" />
    <meta name="author" content="Paul Strain"
    <meta name="robots" content="index, follow" />



    </head>

    <body>
    <div class="topbar"></div>

    <div class="container">
    <div class="header"><a href="index.html"><img src="images/temp_logo.jpg" width="300" height="103" alt="ultimate deck inc logo" class="fltlft" /></a>

    <div class="headerright"> <p><a href="mailto:info@tidytecks.ca">info@tidytecks.ca</a>
    <br />
    Vancouver Office - (778) 809-8439<br />

    In Langley, BC - serving the Vancouver Lower Mainland</p></div>









    </div>

    <ul id="nav">

    <li><a id="current" href="index.html">Home</a></li>

    <li><a href="services.html">Services</a></li>

    <li><a href="photos.html">Photos</a></li>

    <li><a href="about.html">About</a></li>

    <li><a href="faq.html">FAQ</a></li>

    <li><a href="testimonials.html">Testimonials</a></li>

    <li><a href="contact.html">Contact</a></li>
    </ul>
    <div class="contentservices">

    <h1>Photos</h1>

    <hr />

    <h2>Vinyl</h2>
    <script type="text/javascript" src="zoom.js"></script>
    <div class="viynlthumb" style="width:260px" >
    <img id="img1viynl" src="viynl_thumb/tim_decks_viynl_1_thumb.jpg" alt="img1viynl" width="122" height="75" />
    <img id="img2viynl" src="viynl_thumb/tim_decks_viynl_2_thumb.jpg" alt="img2viynl" width="122" height="75" />
    </div>
    <div id="largeviynl">
    </div>





    </div>


    <br />
    <br />



    <!-- end .container --></div>

    <div class="footerclear">
    <div class="footer">
    <div class="footerright">
    <p><a href="mailto:info@tidytecks.ca">info@tidytecks.ca</a>
    <br />
    Vancouver Office - (778) 809-8439<br />
    In Langley, BC - serving the Vancouver Lower Mainland</p>

    <hr />
    </div>




    <span class="footerfltr"><p>&copy;2012 Ultimate Deck <br />Developed by &copy;Pillar Creation</p></span>
    <span class="footerfltl">
    <p>Located in Langley, BC and serving the entire lower mainland including Ladner, Tsawwaseen, White Rock, Vancouver, Surrey, Richmond, Burnaby, Tri-Cities, New Westminster, Langley, Maple Ridge, Abbotsford, Squamish, and Whistler.</p></span>

    </div>
    </body>
    </html>


    Here is my JavaScript:

    var box;

    function zoomIn()
    {
    var filename=this.src.split( "_thumb.jpg" );
    box.style.background="url("+filename[0]+ ".jpg)";
    }

    function zoomOut()
    {box.style.background="inherit";}

    function init()
    {
    box=document.getElementById("largeviynl");
    }

    onload=init;

    var img1viynl=document.getElementById("img1viynl");
    img1viynl.onmouseover=zoomIn; ---------------------------------- LINE 20 -------------------
    img1viynl.onmouseout=zoomOut;

    var img2viynl=document.getElementById("img2viynl");
    img2viynl.onmouseover=zoomIn;
    img2viynl.onmouseout=zoomOut;



    .......

    I am receiving an error on line 20 saying that :

    Timestamp: 9/25/2012 1:24:50 PM
    Error: TypeError: img1viynl is null
    Source File: file:///C:/Users/Mittstain/Documents/WEBSITES/Ultimate%20Deck%20Inc.%20copy/zoom.js
    Line: 20



    Does anyone have any insight on what might be causing this issue ...

    Thanks Kindly P.

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Your script must be positioned below all elements to which it refers (it isn't clear if that is the case), and you should not have global variables that clash with IDs.

  3. #3
    Join Date
    Mar 2009
    Posts
    452
    you are referring to an element before it is created, so you need to run that script after the element is created, move your script after viynlthumb, or simply move

    var img1viynl=document.getElementById("img1viynl");
    img1viynl.onmouseover=zoomIn; ---------------------------------- LINE 20 -------------------
    img1viynl.onmouseout=zoomOut;

    var img2viynl=document.getElementById("img2viynl");
    img2viynl.onmouseover=zoomIn;
    img2viynl.onmouseout=zoomOut;
    inside the init() function

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles