View Full Version : Error Message - 'document.images(....)' is null or not an object

Dec 10th, 2002, 10:48 AM
I am new to programming and am building my first website.

I have used javascript to swap images on mouse over but I keep getting the following error message when I preview in the bowser:-

'document.images(....)' is null or not an object

This refers to lines 12 and 19 - character 1....

I think I am missing a character out but have spent the last 2 hours looking at it and just cannot resolve this problem...Any help would be greatly appreciated.

The code is as follows:-

<script language="javascript" type="text/javascript">
<!-- Begin

// mouseover function
function onImage(imgName) {
if (document.images){
document.images[imgName].src = eval(imgName + 'on.src');

// mouseout function
function offImage(imgName) {
if (document.images){
document.images[imgName].src = eval(imgName + 'off.src');

// End-->


<td ><a href="standrews_history.htm" onMouseover="onImage('history');" onMouseout="offImage('history');"><img src="images/history_but_off.gif" width="48" height="19" border="0" alt="history"></a></td>

<td ><a href="standrews_accomm.htm" onMouseover="onImage('accommodation');" onMouseout="offImage('accommodation');"><img src="images/accom_but_off.gif" width="83" height="19" border="0" alt="accommodation"></a></td>

<td ><a href="rates.htm" onMouseover="onImage('rates');" onMouseout="offImage('rates');"><img src="images/rates_but_off.gif" width="48" height="19" border="0" alt="rates"></a></td>

<td ><a href="golf_standdrews.htm" onMouseover="onImage('golf');" onMouseout="offImage('golf');"><img src="images/golf_but_off.gif" width="48" height="19" border="0" alt="golf"></a></td>

<td ><a href="wedding_venue_scotland.htm" onMouseover="onImage('weddings');" onMouseout="offImage('weddings');"><img src="images/wed_but_off.gif" width="48" height="19" border="0" alt="weddings"></a></td>

<td ><a href="corporate_events.htm" onMouseover="onImage('corporate');" onMouseout="offImage('corporate');"><img src="images/corp_but_off.gif" width="60" height="19" border="0" alt="corporate"></a></td>

<td ><a href="standrews_activities.htm" onMouseover="onImage('activities');" onMouseout="offImage('activities');"><img src="images/act_but_off.gif" width="60" height="19" border="0" alt="activities"></a></td>

<td ><a href="location.htm" onMouseover="onImage('location');" onMouseout="offImage('location');"><img src="images/loc_but_off.gif" width="48" height="19" border="0" alt="location"></a></td>

<td><a href="reserv.htm" onMouseover="onImage('res');" onMouseout="offImage('res');"><img src="images/reserv_but.gif" width="120" height="19" border="0" alt="reservation / enquiries"></a></td>

<td ><a href="tour.htm" onMouseover="onImage('photo');" onMouseout="offImage('photo');"><img src="images/tour_but_off.gif" width="60" height="19" border="0" alt="photo tour"></a></td>

<td ><a href="brochure.htm" onMouseover="onImage('broch');" onMouseout="offImage('broch');"><img src="images/onlbr_but_off.gif" width="83" height="19" border="0" alt="online brochure (PDF)"></a></td>

<td ><a href="sitemap.htm" onMouseover="onImage('sitemap');" onMouseout="offImage('sitemap');"><img src="images/site_but_off.gif" width="48" height="19" border="0" alt="site map"></a></td>

<script language="javascript" type="text/javascript">
<!-- //Begin

if (document.images) {

var historyon = new Image();
historyon.src = "images/history_but_on.gif";
var historyoff = new Image();
historyoff.src = "images/history_but_off.gif";
var accommodationon = new Image();
accommodationon.src = "images/accom_but_on.gif";
var accommodationoff = new Image();
accommodationoff.src = "images/accom_but_off.gif";
var rateson = new Image();
rateson.src = "images/rates_but_on.gif";
var ratesoff = new Image();
ratesoff.src = "images/rates_but_off.gif";
var golfon = new Image();
golfon.src = "images/golf_but_on.gif";
var golfoff = new Image();
golfoff.src = "images/golf_but_off.gif";
var weddingson = new Image();
weddingson.src = "images/wed_but_on.gif";
var weddingsoff = new Image();
weddingsoff.src = "images/wed_but_off.gif";
var corporateon = new Image();
corporateon.src = "images/corp_but_on.gif";
var corporateoff = new Image();
corporateoff.src = "images/corp_but_off.gif";
var activitieson = new Image();
activitieson.src = "images/.act_but_ongif";
var activitiesoff = new Image();
activitiesoff.src = "images/act_but_off.gif";
var locationon = new Image();
locationon.src = "images/loc_but_on.gif";
var locationoff = new Image();
locationoff.src = "images/loc_but_off.gif"
var reson = new Image();
reson.src = "images/reserv_but_on.gif";
var resoff = new Image();
resoff.src = "images/reserv_but.gif"
var photoon = new Image();
photoon.src = "images/tour_but_on.gif";
var photooff = new Image();
photooff.src = "images/tour_but_off.gif"
var brochon = new Image();
brochon.src = "images/onlbr_but_on.gif";
var brochoff = new Image();
brochoff.src = "images/onlbr_but_off.gif"
var sitemapon = new Image();
sitemapon.src = "images/site_but_on.gif";
var sitemapoff = new Image();
sitemapoff.src = "images/site_but_off.gif";

Many thanks in anticipation


Dec 10th, 2002, 10:55 AM
The errors are presumably on the lines where the rollover functions do this:


You haven't named your images in the <img> tag, so there's nothing to look up in the images[] array. Common error.

<td ><a href="standrews_history.htm" onMouseover="onImage('history');" onMouseout="offImage('history');"><img src="images/history_but_off.gif" width="48" height="19" border="0" alt="history" name="history"></a></td>

Dec 10th, 2002, 11:20 AM
Thank you v much - you've mde my day.....