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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image rollover help

    hi,
    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:
    www.bandm.co.uk/RB/mouldings.html

    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?

    Kirsty

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/main.dwt" codeOutsideHTMLIsLocked="false" -->
    
    <head>
    	<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">
    	/*<![CDATA[*/
    	@import url(http://www.bandm.co.uk/RB/BurbidgeStyles.css);
    	/*]]>*/
    	</style>
    
    	<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 -->
    	</script>
    
    
        <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    </head>
    
    <body onload="">
    
    <div id="wrapper">
    
    	<div id="masthead">
    	 	<div id="mastheadcontent">
    		<ul>
    			<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>
    
    			<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>
    
    			<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>
    
    
    			<li><img src="http://www.bandm.co.uk/RB/logo.jpg" alt="Richard Burbidge Logo" class="rblogo" name="Logo" /></li>
    		</ul>
    		</div>
    	</div>
    
    	<!-- InstanceBeginEditable name="Main Content" -->
    	<div id="content">
    
    
    					<img src="http://www.bandm.co.uk/RB/MouldingsLifestyle.jpg" alt="Stair Banister" />
    		<div id="contentNav">
    
    			<ul>
    
    			<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>
    			</ul>
    		</div>
    		<div id="Maincontent">
    		<h3>Mouldings</h3>
    		<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" />
    		</div>
    	<br />
    
    	</div>
    	<!-- InstanceEndEditable -->
    	<div id="footer">
    		<div id="footernav">
    			<ul>
    			<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>
    			</ul>
    		</div>
    	</div>
    
    
    </div>
    
    </body>
    
    <!-- InstanceEnd --></html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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