Getting A Null Error when trying to do image rollover

**Pillar Creation** · 09-25-2012 03:25 PM

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

</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>©2012 Ultimate Deck <br />Developed by ©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.

**Logic Ali** · 09-25-2012 05:39 PM

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.

**ZABI** · 09-26-2012 01:38 AM

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: Getting A Null Error when trying to do image rollover

Thread Tools

Display

Getting A Null Error when trying to do image rollover

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions