View Full Version : Image rollover help

08-01-2006, 12:37 PM
I've built a sample site for a job interview and thought it would be a good idea to use it as an excuse to start learning javascript. I'm very new to handcoding Javascript so thought I would start off with an easy rollover image for my top nav.

I've got my script to work but only if the second image is a .jpg I've already used on the page.

You can see this at:

I want each rollover to use the relevant images i.e. for the mouldings link I want to use 'mouldingsicon.jpg' and 'mouldingicons1.jpg' for the decking link I want 'deckingicon.jpg' and 'deckingicon1.jpg' etc. But for some reason my page can only find 'mouldingsicon.jpg' (which I've used on the page) and not 'mouldingsicon1.jpg'.

You can see this at:
www.bandm.co.uk/RB/index.html (This site has been uploaded so I can test for browser compatability. If using IE it may not display correctly at the moment, Firefox is perfect though.)

Am I doing something very obviously wrong?


08-01-2006, 01:21 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Richard Burbidge - The UK's leading supplier of decorative timber parts</title>
<!-- InstanceEndEditable -->
<meta name="keywords" content="Decorative, Timber, Mouldings, Architrave, Window Frames, Dado Rails, Door Frames Wood, Laminate, Hardwood, Floor, flooring, decking, Garden, stair, Staircase, Stairwell, Stair parts, banister, post, ballustrading, timber" />
<meta name="description" content="Richard Burbidge Ltd. The UK's leading supplier of decorative timber parts" />

<link rel="shortcut icon" href="favicon.ico" />

<style type="text/css" media="all">
@import url(http://www.bandm.co.uk/RB/BurbidgeStyles.css);

<script language="Javascript" type="text/javascript">
<!-- Hide script from browsers

if (document.images) {
mouldings1 = new Image();
mouldings2 = new Image();
decking1 = new Image();
decking2 = new Image();
stairparts1 = new Image();
stairparts2 = new Image();
flooring1 = new Image();
flooring2 = new Image();

mouldings1.src = "http://www.bandm.co.uk/RB/mouldingsicon.jpg"
mouldings2.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif"
decking1.src = "http://www.bandm.co.uk/RB/deckingicon.jpg"
decking2.src = "http://www.bandm.co.uk/RB/stairsicon.jpg"
stairparts1.src = "http://www.bandm.co.uk/RB/stairsicon.jpg"
stairparts2.src = "http://www.bandm.co.uk/RB/flooringicon.jpg"
flooring1.src = "http://www.bandm.co.uk/RB/flooringicon.jpg"
flooring2.src = "http://www.bandm.co.uk/RB/mouldingsicon.jpg"

else {
mouldings1 = ""
mouldings2 = ""
decking1 = ""
decking2 = ""
stairparts1 = ""
stairparts2 = ""
flooring1 = ""
flooring2 = ""

document.mouldings = ""
document.decking = ""
document.stairparts = ""
document.flooring = ""

// End hiding script from old browsers -->

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->

<body onload="">

<div id="wrapper">

<div id="masthead">
<div id="mastheadcontent">
<li><a href="mouldings.html" class="tabs"><img onmouseover="this.src=mouldings1.src" onmouseout="this.src=mouldings2.src" src="http://www.bandm.co.uk/RB/mouldingsicon.jpg" alt="Decorative Mouldings" class="moulding" name="mouldings" width="80" height="80" /></a>
<p><a href="mouldings.html">Mouldings</a></p>

<li><a href="decking.html"><img onmouseover="this.src=decking1.src" onmouseout="this.src=decking2.src" src="http://www.bandm.co.uk/RB/deckingicon.jpg" alt="Decking" class="decking" name="decking" width="80" height="80" /></a>

<p><a href="decking.html">Decking</a></p>

<li><a href="StairParts.html"><img onmouseover="this.src=stairparts1.src" onmouseout="this.src=stairparts2.src" src="http://www.bandm.co.uk/RB/stairsicon.jpg" alt="Stair parts" class="stairparts" name="stairparts" width="80" height="80" /></a>
<p><a href="StairParts.html">Stairparts</a></p></li>

<li><a href="Flooring.html"><img onmouseover="this.src=flooring1.src" onmouseout="this.src=flooring2.src" src="http://www.bandm.co.uk/RB/flooringicon.jpg" alt="Laminate and Hardwood flooring" class="flooring" name="flooring" width="80" height="80" /></a>
<p><a href="Flooring.html">Flooring</a></p>

<li><img src="http://www.bandm.co.uk/RB/logo.jpg" alt="Richard Burbidge Logo" class="rblogo" name="Logo" /></li>

<!-- InstanceBeginEditable name="Main Content" -->
<div id="content">

<img src="http://www.bandm.co.uk/RB/MouldingsLifestyle.jpg" alt="Stair Banister" />
<div id="contentNav">


<li><a href="">Richard Burbidge Timber Mouldings</a></li>
<li><a href="">Decorative Mouldings</a></li>
<li><a href="">Architectural Mouldings</a></li>
<li><a href="">Ornamental Mouldings</a></li>
<li><a href="">Doors</a></li>
<li><a href="">Screens</a></li>

<li><a href="">Panel Mouldings</a></li>
<div id="Maincontent">
<p>Anyone who works with wood will recognise the appeal of Richard Burbidge mouldings. They can be found in almost every room of every home and have a multitude of practical and decorative applications.</p>
<br />

<p>Mouldings are often used to hide gaps, cover rough edges or to tidy up imperfect joins, but they can also simply enhance the style and character of a room.</p>
<br />
<p>Richard Burbidge understands the needs of the both the professional and DIY enthusiast alike when it comes to adding that final touch to building and renovation projects, and with hundreds of different profiles to choose from, you'll be sure to find the moulding that you are looking for. Please click on the icons below for further details.</p>
<br />

<img src="DownloadedImages/moulding1.jpg" alt="Moulding Example 1" /><img src="DownloadedImages/moulding2.jpg" alt="Moulding Example 2" /><img src="DownloadedImages/moulding3.jpg" alt="Moulding Example 3" /><img src="DownloadedImages/moulding4.jpg" alt="Moulding Example 4" />
<br />

<!-- InstanceEndEditable -->
<div id="footer">
<div id="footernav">
<li><a href="index.html" class"">Home</a></li>
<li><a href="" class="">Stockist Locator</a></li>
<li><a href="" class="">Brochure Request</a></li>

<li><a href="" class="">Pricelist</a></li>
<li><a href="" class="">Shop</a></li>
<li><a href="" class="">Technical Support</a></li>
<li><a href="" class="">Media</a></li>



<!-- InstanceEnd --></html>