Link to home
Start Free TrialLog in
Avatar of wilkesit
wilkesit

asked on

Code to change background image of table

Hi

tommyBoy gave me an excellent piece of code to fade images.

I need to adjust it so it can cycle through 5 background images as follows

<td height="406" valign="top" background="images/slider.jpg">

It doesn't need to automatically select, I can set the images manually, but the javascript below just needs to be adjusted to the background above will cycle slider1.jpg, slider2.jpg, slider3.jpg etc

Many thanks

Matt


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

var index = 0;

function layerScroll() {
	// set index number
	if (index == $('.ls-layer').length - 1) {
		index = 0;
	} else {
		index ++;
	}
	var current = index;
	// fade in next slide
	$('.ls-layer').eq(index).fadeIn(2000, function(){
	});
	if (current == 0) {
		current = $('.ls-layer').length;
	}
	// fade out current slide
	$('.ls-layer').eq(current - 1).fadeOut(2000);
	
}

$(document).ready(function(){
	
	   var layerSpeed = 5000; //set duration for each slide here
		
	   // timer for large image fader
	   var layerTimer = setInterval(function() { layerScroll(); }, layerSpeed);
		
		
});
</script>
<style>
#main {
	width: 100%;  
	margin: 0 auto;
	position: relative;
	height: 100%;     
	overflow: hidden;  
}
/* ==========================================================================
   Large Image Fader
   ========================================================================== */

.ls-layer {
	position: absolute;
	display: none;
	background-position: top left;
	background-repeat: no-repeat;
	overflow: hidden;
	float: left; 
	width: 100%;
}
</style>
</head>

<body>
<div id="main">
<!-- LayerSlider wrapper -->
				<div id="layerslider" style="width: 100%; height: 700px; margin: 0 auto; padding: 0 ">
					
					<!-- Slide 1 -->
					<img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/kerala-scenery/kerala-nature-beautiful-scenery.jpg" alt="" />
                    <!-- Slide 2 -->
					<img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/natural-scenery/natural-scenery-photos.jpg" alt="" />
                    <!-- Slide 3 -->
					<img class="ls-layer"src="https://d22d7v2y1t140g.cloudfront.net/m_1394387_lgdLaipbl8nw.jpg" alt="" />
                    
                </div><!-- /LayerSlider wrapper -->
</div>
</body>
</html>

Open in new window

Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Sorry, I don't understand what you need...

I did this mock based on your code.
If you want you can change it to reflect what you need.
http://jsfiddle.net/Ty4Pz/
Avatar of wilkesit
wilkesit

ASKER

Hi Alex

Thanks - but what I need is a Javascript that will cycle through 5 images, changing the background of a table data cell...

<table>
<tr>
<td class="fader" height="406" valign="top" background="images/fader1.jpg"></td>
</tr>
</table>

The Javascript would change the background image every five seconds - starting with images/fader1.jpg then changing to images/fader2.jpg to images/fader3.jpg etc

Thanks
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Backgrounds don't allow you to do this kind of effects, at least not in all browsers.

So basically I added what you have in the td, set it as position absolute plus some other modifs in the css.
http://jsfiddle.net/Ty4Pz/1/

Make sure you set the td position:relative otherwise the pictures will appear outside.
Avatar of wilkesit
wilkesit

ASKER

Thanks for your help but I can't get it to work!
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Hummm... why not?
Have you seen the example code I wrote in jsFiddle?

You have to give me more details about what you're doing so I can build a test case.
Anyway, the sample I posted is pretty much straight forward.

Just make sure you use the modified CSS for the #main and you set the cell <td> as position:relative.
Setting the cell dimensions should be also a good practice.
Avatar of wilkesit
wilkesit

ASKER

Hi

Thanks - and sorry for sounding so dumb....

I saw the example code you wrote in jsFiddle which is excellent... but when I put it in my code it just doesn't work...

Here is the whole of the html page...

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>weinsureexcess.com</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

// Declare vars...
      var MyVar1;
      var MyVar2;
      var MyVar3;
      var MyVar4;
      var MyVar5;
      var MyVar6;
      var MyVar7;
      var MyVar8;
      var MyVar9;
      var MyVar10;
      var MyVar11;
      var MyVar12;
      var MyVar13;
      var MyVar14;
      var MyVar15;
      var MyVar16;
      var MyVar17;
      var MyVar18;
      var MyVar19;
      var MyVar20;

function WIE_showmenu() {
      var item = document.getElementById("wie_menu");
      item.style.visibility = "visible";
      //document.wie_menu.style="position:absolute; width:961px; height:374px; z-index:1; left: 361px; top: 149px; visibility: visible;";
}

function WIE_cltimeout() {
      clearTimeout(MyVar1);
      clearTimeout(MyVar2);
      clearTimeout(MyVar3);
      clearTimeout(MyVar4);
      clearTimeout(MyVar5);
      clearTimeout(MyVar6);
      clearTimeout(MyVar7);
      clearTimeout(MyVar8);
      clearTimeout(MyVar9);
      clearTimeout(MyVar10);
      clearTimeout(MyVar11);
      clearTimeout(MyVar12);
      clearTimeout(MyVar13);
      clearTimeout(MyVar14);
      clearTimeout(MyVar15);
      clearTimeout(MyVar16);
      clearTimeout(MyVar17);
      clearTimeout(MyVar18);
      clearTimeout(MyVar19);
      clearTimeout(MyVar20);
}

function WIE_hidemenu() {
      var item = document.getElementById("wie_menu");
      item.style.visibility = "hidden";
      //document.wie_menu.style="position:absolute; width:961px; height:374px; z-index:1; left: 361px; top: 149px; visibility: visible;";
}



var index = 0;

function layerScroll() {
    // set index number
    if (index == $('.ls-layer').length - 1) {
        index = 0;
    } else {
        index++;
    }
    var current = index;
    // fade in next slide
    $('.ls-layer').eq(index).fadeIn(2000, function () {});
    if (current == 0) {
        current = $('.ls-layer').length;
    }
    // fade out current slide
    $('.ls-layer').eq(current - 1).fadeOut(2000);

}

$(document).ready(function () {

    var layerSpeed = 5000; //set duration for each slide here

    // timer for large image fader
    var layerTimer = setInterval(function () {
        layerScroll();
    }, layerSpeed);


});




//-->
</script>
    <style type=text/css>
      .rounded_edges {
        -moz-border-radius: 10px;
        border-radius: 10px;
        border: 1px solid black;
      }


#main {
    width: 100%;
    margin: 0 auto;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    z-index: -1;
}
/* ==========================================================================
   Large Image Fader
   ========================================================================== */
 .ls-layer {
    position: absolute;
    display: none;
    background-position: top left;
    background-repeat: no-repeat;
    overflow: hidden;
    float: left;
    width: 100%;
}

    </style>
</head>

<body bgcolor="#FFFFFF">
<table width="963"  border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td valign="bottom" background="images/bg.jpg">
      <img src="images/tabs.jpg" width="963" border="0" usemap="#Map"></td>
  </tr>
 
   <tr>
    <td height="406" valign="top">

<div id="main">
                <!-- LayerSlider wrapper -->
                <div id="layerslider" style="width: 100%; height: 700px; margin: 0 auto; padding: 0 ">
                    <!-- Slide 1 -->
                    <img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/kerala-scenery/kerala-nature-beautiful-scenery.jpg" alt="" />
                    <!-- Slide 2 -->
                    <img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/natural-scenery/natural-scenery-photos.jpg" alt="" />
                    <!-- Slide 3 -->
                    <img class="ls-layer" src="https://d22d7v2y1t140g.cloudfront.net/m_1394387_lgdLaipbl8nw.jpg" alt="" />
                </div>
                <!-- /LayerSlider wrapper -->
</div>

      <div id="wie_menu" style="position:absolute; width:961px; height:374px; z-index:1; visibility: hidden;" >
            <div id="dropdown">
<table width="100%"  height="334" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-width:1px; border-style:solid; border-color:#000000;"  class="rounded_edges">
  <tr valign="top">
    <td></td>
    <td height="5"></td>
    <td></td>
    <td></td>
  </tr>
  <tr valign="top">
    <td width="1%"></td>
    <td width="28%" height="313">
      <p><b><font color="#041A63" size="2" face="Verdana, Arial, Helvetica, sans-serif"><u>Personal Vehicles</u></font><font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font></b><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><br>
        <a href="linkdoc.php?ref=1" onmouseover="WIE_cltimeout();" onmouseout="MyVar1=setTimeout(function(){WIE_hidemenu()},3000);">Personal Motor</a><br>
        <a href="linkdoc.php?ref=2" onmouseover="WIE_cltimeout();" onmouseout="MyVar2=setTimeout(function(){WIE_hidemenu()},3000);">Caravan &amp; Motor Home</a><br>
        <a href="linkdoc.php?ref=3" onmouseover="WIE_cltimeout();" onmouseout="MyVar3=setTimeout(function(){WIE_hidemenu()},3000);">Motor Cycle</a><br>
       <a href="linkdoc.php?ref=4" onmouseover="WIE_cltimeout();" onmouseout="MyVar4=setTimeout(function(){WIE_hidemenu()},3000);">Multi Vehicle</a><br>
    </font></p>
      <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Hire</u></font></b><br>
         <a href="linkdoc.php?ref=5" onmouseover="WIE_cltimeout();" onmouseout="MyVar5=setTimeout(function(){WIE_hidemenu()},3000);">Car Hire</a>
      </font></p></td>
    <td width="37%"><p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Business Vehilces </u></font></b><br>
        <a href="linkdoc.php?ref=6" onmouseover="WIE_cltimeout();" onmouseout="MyVar6=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Motor (up to 3.5 Tons/Fleet Single)</a><br>
        <a href="linkdoc.php?ref=7" onmouseover="WIE_cltimeout();" onmouseout="MyVar7=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Motor (from 3.5 Tons to 44 Tons)</a><br>
        <a href="linkdoc.php?ref=8" onmouseover="WIE_cltimeout();" onmouseout="MyVar8=setTimeout(function(){WIE_hidemenu()},3000);">Business Care (SME's Using Car For Business)</a><br>
        <a href="linkdoc.php?ref=9" onmouseover="WIE_cltimeout();" onmouseout="MyVar9=setTimeout(function(){WIE_hidemenu()},3000);">Minibus</a><br>
        <a href="linkdoc.php?ref=10" onmouseover="WIE_cltimeout();" onmouseout="MyVar10=setTimeout(function(){WIE_hidemenu()},3000);">Taxi</a><br>
        <a href="linkdoc.php?ref=11" onmouseover="WIE_cltimeout();" onmouseout="MyVar11=setTimeout(function(){WIE_hidemenu()},3000);">Driving Instructor</a><br>
    </font></p>
      <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Trade</u></font></b><br>
         <a href="linkdoc.php?ref=12" onmouseover="WIE_cltimeout();" onmouseout="MyVar12=setTimeout(function(){WIE_hidemenu()},3000);">Fleet (Multiple Vehicle)</a><br>
         <a href="linkdoc.php?ref=13" onmouseover="WIE_cltimeout();" onmouseout="MyVar13=setTimeout(function(){WIE_hidemenu()},3000);">Motor Traders</a>
      </font></p></td>
    <td width="34%"><p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Business</u></font></b><br>
         <a href="linkdoc.php?ref=14" onmouseover="WIE_cltimeout();" onmouseout="MyVar14=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Combined</a><br>
         <a href="linkdoc.php?ref=15" onmouseover="WIE_cltimeout();" onmouseout="MyVar15=setTimeout(function(){WIE_hidemenu()},3000);">Tradesman Liability</a><br>
       <a href="linkdoc.php?ref=16" onmouseover="WIE_cltimeout();" onmouseout="MyVar16=setTimeout(function(){WIE_hidemenu()},3000);">Landlord</a><br>
    </font></p>
      <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Lifestyle</u></font></b><br>
         <a href="linkdoc.php?ref=17" onmouseover="WIE_cltimeout();" onmouseout="MyVar17=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor &amp; Home)</a><br>
         <a href="linkdoc.php?ref=18" onmouseover="WIE_cltimeout();" onmouseout="MyVar18=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor, Home &amp; Travel)</a><br>
         <a href="linkdoc.php?ref=19" onmouseover="WIE_cltimeout();" onmouseout="MyVar19=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor, Home, Travel, Media)</a><br>
       <a href="linkdoc.php?ref=20" onmouseover="WIE_cltimeout();" onmouseout="MyVar20=setTimeout(function(){WIE_hidemenu()},3000);">Home Building &amp; Contents </a></font></p></td>
  </tr>
</table>
</div>
</div>

      </td>
  </tr>
  <tr>
    <td>
      <!--
      <table width="960"  border="0" cellspacing="0" cellpadding="0">
      <tr align="center">
        <td width="33%"><b><img src="images/box1.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box2.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box3.jpg" width="320" height="295"></b></td>
      </tr>
      <tr align="center">
        <td><b><img src="images/box4.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box5.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box6.jpg" width="320" height="295"></b></td>
      </tr>
    </table>--></td>
  </tr>
  <tr>
    <td height="500" align="right" valign="top" bgcolor="#EEEEEE">&nbsp;</td>
  </tr>
  <tr>
    <td align="right" valign="top" bgcolor="#FFFFFF"><img src="images/complectus.jpg" width="119" height="92"></td>
  </tr>
</table>


<p align="center">&nbsp;</p>
<map name="Map">
  <area shape="rect" coords="-7,101,140,132" onmouseover="WIE_showmenu();">
</map>
</body>
</html>


Any idea what I'm doing wrong?

Thanks!
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Ok mate, here's your code working:
http://jsfiddle.net/aJ3bG/2/

There were 2 issues:
1. I told you to put the td with position: relative and it wasn't.

2. Setting the background of table as white screws this a bit mostly because I'm setting the z-index to -1. Removing the z-index does the job, just make sure you set a higher z-index to anything you may want to appear on top.

Extra 3 - I'm also setting the td as display block. FF seems to like it better :)

Extra 4 - Next time you post code in EE, make sure you wrap it in a code block! :p

Cheers mate, hope it helps!
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Ah, in the demo code I've set the table border to 1 just to see what's going on.
This one has it set back to 0: http://jsfiddle.net/aJ3bG/4/
Avatar of wilkesit
wilkesit

ASKER

Hi thanks so much

1. Sorry about the td position - oops!

2. Thanks re the z-index advice - much appreciated :-)

3. Display block - new one to me - I'm going to google this and learn more - thanks - I sound like such a newbie (I've been programming for 30 years but I'm pretty new to browser side coding so your help is very welcome!)

4. Code block - sorry - yep will do!!!!

Speaking of which - I'm so grateful for your help - and I'm sure it's almost there, but it's just not displaying the images - can I PayPal you a six pack if you just take another look what I've done? :-/ 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>weinsureexcess.com</title>
<link href="styles.css" rel="stylesheet" type="text/css" />


<script language="JavaScript" type="text/JavaScript">
<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init == true) with(navigator) {
        if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {
            document.MM_pgW = innerWidth;
            document.MM_pgH = innerHeight;
            onresize = MM_reloadPage;
        }
    } else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();
}
MM_reloadPage(true);

// Declare vars...
var MyVar1;
var MyVar2;
var MyVar3;
var MyVar4;
var MyVar5;
var MyVar6;
var MyVar7;
var MyVar8;
var MyVar9;
var MyVar10;
var MyVar11;
var MyVar12;
var MyVar13;
var MyVar14;
var MyVar15;
var MyVar16;
var MyVar17;
var MyVar18;
var MyVar19;
var MyVar20;

function WIE_showmenu() {
    var item = document.getElementById("wie_menu");
    item.style.visibility = "visible";
    //document.wie_menu.style="position:absolute; width:961px; height:374px; z-index:1; left: 361px; top: 149px; visibility: visible;";
}

function WIE_cltimeout() {
    clearTimeout(MyVar1);
    clearTimeout(MyVar2);
    clearTimeout(MyVar3);
    clearTimeout(MyVar4);
    clearTimeout(MyVar5);
    clearTimeout(MyVar6);
    clearTimeout(MyVar7);
    clearTimeout(MyVar8);
    clearTimeout(MyVar9);
    clearTimeout(MyVar10);
    clearTimeout(MyVar11);
    clearTimeout(MyVar12);
    clearTimeout(MyVar13);
    clearTimeout(MyVar14);
    clearTimeout(MyVar15);
    clearTimeout(MyVar16);
    clearTimeout(MyVar17);
    clearTimeout(MyVar18);
    clearTimeout(MyVar19);
    clearTimeout(MyVar20);
}

function WIE_hidemenu() {
    var item = document.getElementById("wie_menu");
    item.style.visibility = "hidden";
    //document.wie_menu.style="position:absolute; width:961px; height:374px; z-index:1; left: 361px; top: 149px; visibility: visible;";
}



var index = 0;

function layerScroll() {
    // set index number
    if (index == $('.ls-layer').length - 1) {
        index = 0;
    } else {
        index++;
    }
    var current = index;
    // fade in next slide
    $('.ls-layer').eq(index).fadeIn(2000, function () {});
    if (current == 0) {
        current = $('.ls-layer').length;
    }
    // fade out current slide
    $('.ls-layer').eq(current - 1).fadeOut(2000);

}

$(document).ready(function () {

    var layerSpeed = 5000; //set duration for each slide here

    // timer for large image fader
    var layerTimer = setInterval(function () {
        layerScroll();
    }, layerSpeed);


});

//-->
</script>

    <style type=text/css>
 

      .rounded_edges {
          -moz-border-radius: 10px;
          border-radius: 10px;
          border: 1px solid black;
      }
      #main {
          width: 100%;
          margin: 0 auto;
          top:0;
          left: 0;
          right: 0;
          bottom: 0;
          position: absolute;
          overflow: hidden;
          z-index: 1;
      }
      /* ==========================================================================
   Large Image Fader
   ========================================================================== */
      .ls-layer {
          position: absolute;
          display: none;
          background-position: top left;
          background-repeat: no-repeat;
          overflow: hidden;
          float: left;
          width: 100%;
      }


    </style>


</head>

<body bgcolor="#FFFFFF">
<table width="963" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
    <tr>
        <td valign="bottom" background="images/bg.jpg">
            <img src="images/tabs.jpg" width="963" border="0" usemap="#Map">
        </td>
    </tr>
    <tr>
        <td height="406" valign="top" style="position:relative; display: block;">
            <div id="main">
                <!-- LayerSlider wrapper -->
                <div id="layerslider" style="width: 100%; height: 700px; margin: 0 auto; padding: 0 ">
                    <!-- Slide 1 -->
                    <img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/kerala-scenery/kerala-nature-beautiful-scenery.jpg" alt="" />
                    <!-- Slide 2 -->
                    <img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/natural-scenery/natural-scenery-photos.jpg" alt="" />
                    <!-- Slide 3 -->
                    <img class="ls-layer" src="https://d22d7v2y1t140g.cloudfront.net/m_1394387_lgdLaipbl8nw.jpg" alt="" />
                </div>
                <!-- /LayerSlider wrapper -->
            </div>
            <div id="wie_menu" style="position:absolute; width:961px; height:374px; z-index:1; visibility: hidden;">
                <div id="dropdown">
                    <table width="100%" height="334" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-width:1px; border-style:solid; border-color:#000000;" class="rounded_edges">
                        <tr valign="top">
                            <td></td>
                            <td height="5"></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr valign="top">
                            <td width="1%"></td>
                            <td width="28%" height="313">
                                <p><b><font color="#041A63" size="2" face="Verdana, Arial, Helvetica, sans-serif"><u>Personal Vehicles</u></font><font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font></b><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><br>
        <a href="linkdoc.php?ref=1" onmouseover="WIE_cltimeout();" onmouseout="MyVar1=setTimeout(function(){WIE_hidemenu()},3000);">Personal Motor</a><br>
        <a href="linkdoc.php?ref=2" onmouseover="WIE_cltimeout();" onmouseout="MyVar2=setTimeout(function(){WIE_hidemenu()},3000);">Caravan &amp; Motor Home</a><br>
        <a href="linkdoc.php?ref=3" onmouseover="WIE_cltimeout();" onmouseout="MyVar3=setTimeout(function(){WIE_hidemenu()},3000);">Motor Cycle</a><br>
       <a href="linkdoc.php?ref=4" onmouseover="WIE_cltimeout();" onmouseout="MyVar4=setTimeout(function(){WIE_hidemenu()},3000);">Multi Vehicle</a><br>
    </font>
                                </p>
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Hire</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=5" onmouseover="WIE_cltimeout();" onmouseout="MyVar5=setTimeout(function(){WIE_hidemenu()},3000);">Car Hire</a>

                                    </font>
                                </p>
                            </td>
                            <td width="37%">
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Business Vehilces </u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=6" onmouseover="WIE_cltimeout();" onmouseout="MyVar6=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Motor (up to 3.5 Tons/Fleet Single)</a>
                                    <br> <a href="linkdoc.php?ref=7" onmouseover="WIE_cltimeout();" onmouseout="MyVar7=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Motor (from 3.5 Tons to 44 Tons)</a>
                                    <br> <a href="linkdoc.php?ref=8" onmouseover="WIE_cltimeout();" onmouseout="MyVar8=setTimeout(function(){WIE_hidemenu()},3000);">Business Care (SME's Using Car For Business)</a>
                                    <br> <a href="linkdoc.php?ref=9" onmouseover="WIE_cltimeout();" onmouseout="MyVar9=setTimeout(function(){WIE_hidemenu()},3000);">Minibus</a>
                                    <br> <a href="linkdoc.php?ref=10" onmouseover="WIE_cltimeout();" onmouseout="MyVar10=setTimeout(function(){WIE_hidemenu()},3000);">Taxi</a>
                                    <br> <a href="linkdoc.php?ref=11" onmouseover="WIE_cltimeout();" onmouseout="MyVar11=setTimeout(function(){WIE_hidemenu()},3000);">Driving Instructor</a>
                                    <br>
                                    </font>
                                </p>
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Trade</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=12" onmouseover="WIE_cltimeout();" onmouseout="MyVar12=setTimeout(function(){WIE_hidemenu()},3000);">Fleet (Multiple Vehicle)</a>
                                    <br> <a href="linkdoc.php?ref=13" onmouseover="WIE_cltimeout();" onmouseout="MyVar13=setTimeout(function(){WIE_hidemenu()},3000);">Motor Traders</a>

                                    </font>
                                </p>
                            </td>
                            <td width="34%">
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Business</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=14" onmouseover="WIE_cltimeout();" onmouseout="MyVar14=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Combined</a>
                                    <br> <a href="linkdoc.php?ref=15" onmouseover="WIE_cltimeout();" onmouseout="MyVar15=setTimeout(function(){WIE_hidemenu()},3000);">Tradesman Liability</a>
                                    <br> <a href="linkdoc.php?ref=16" onmouseover="WIE_cltimeout();" onmouseout="MyVar16=setTimeout(function(){WIE_hidemenu()},3000);">Landlord</a>
                                    <br>
                                    </font>
                                </p>
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Lifestyle</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=17" onmouseover="WIE_cltimeout();" onmouseout="MyVar17=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor &amp; Home)</a>
                                    <br> <a href="linkdoc.php?ref=18" onmouseover="WIE_cltimeout();" onmouseout="MyVar18=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor, Home &amp; Travel)</a>
                                    <br> <a href="linkdoc.php?ref=19" onmouseover="WIE_cltimeout();" onmouseout="MyVar19=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor, Home, Travel, Media)</a>
                                    <br> <a href="linkdoc.php?ref=20" onmouseover="WIE_cltimeout();" onmouseout="MyVar20=setTimeout(function(){WIE_hidemenu()},3000);">Home Building &amp; Contents </a>
                                    </font>
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <!-- <table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr align="center">
        <td width="33%"><b><img src="images/box1.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box2.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box3.jpg" width="320" height="295"></b></td>
      </tr>
      <tr align="center">
        <td><b><img src="images/box4.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box5.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box6.jpg" width="320" height="295"></b></td>
      </tr>
    </table>-->
        </td>
    </tr>
    <tr>
        <td height="500" align="right" valign="top" bgcolor="#EEEEEE">&nbsp;</td>
    </tr>
    <tr>
        <td align="right" valign="top" bgcolor="#FFFFFF">
            <img src="images/complectus.jpg" width="119" height="92">
        </td>
    </tr>
</table>
<p align="center">&nbsp;</p>
<map name="Map">
    <area shape="rect" coords="-7,101,140,132" onmouseover="WIE_showmenu();">
</map>
</body>
</html>

Open in new window

Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Hi mate,
Your only problem now is that you need jQuery but you're not referencing it.
You miss this line before your own script code block:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

This will use Google's CDN, you might consider hosting it yourself and reference your own jQuery file.

Don't know what's a CDN?
Read this blog post, it will put you on track: http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/

Here's your full code, including the jQuery reference. Everything is working now: 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>weinsureexcess.com</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

<script language="JavaScript" type="text/JavaScript">
<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init == true) with(navigator) {
        if ((appName == "Netscape") && (parseInt(appVersion) == 4)) {
            document.MM_pgW = innerWidth;
            document.MM_pgH = innerHeight;
            onresize = MM_reloadPage;
        }
    } else if (innerWidth != document.MM_pgW || innerHeight != document.MM_pgH) location.reload();
}
MM_reloadPage(true);

// Declare vars...
var MyVar1;
var MyVar2;
var MyVar3;
var MyVar4;
var MyVar5;
var MyVar6;
var MyVar7;
var MyVar8;
var MyVar9;
var MyVar10;
var MyVar11;
var MyVar12;
var MyVar13;
var MyVar14;
var MyVar15;
var MyVar16;
var MyVar17;
var MyVar18;
var MyVar19;
var MyVar20;

function WIE_showmenu() {
    var item = document.getElementById("wie_menu");
    item.style.visibility = "visible";
    //document.wie_menu.style="position:absolute; width:961px; height:374px; z-index:1; left: 361px; top: 149px; visibility: visible;";
}

function WIE_cltimeout() {
    clearTimeout(MyVar1);
    clearTimeout(MyVar2);
    clearTimeout(MyVar3);
    clearTimeout(MyVar4);
    clearTimeout(MyVar5);
    clearTimeout(MyVar6);
    clearTimeout(MyVar7);
    clearTimeout(MyVar8);
    clearTimeout(MyVar9);
    clearTimeout(MyVar10);
    clearTimeout(MyVar11);
    clearTimeout(MyVar12);
    clearTimeout(MyVar13);
    clearTimeout(MyVar14);
    clearTimeout(MyVar15);
    clearTimeout(MyVar16);
    clearTimeout(MyVar17);
    clearTimeout(MyVar18);
    clearTimeout(MyVar19);
    clearTimeout(MyVar20);
}

function WIE_hidemenu() {
    var item = document.getElementById("wie_menu");
    item.style.visibility = "hidden";
    //document.wie_menu.style="position:absolute; width:961px; height:374px; z-index:1; left: 361px; top: 149px; visibility: visible;";
}



var index = 0;

function layerScroll() {
    // set index number
    if (index == $('.ls-layer').length - 1) {
        index = 0;
    } else {
        index++;
    }
    var current = index;
    // fade in next slide
    $('.ls-layer').eq(index).fadeIn(2000, function () {});
    if (current == 0) {
        current = $('.ls-layer').length;
    }
    // fade out current slide
    $('.ls-layer').eq(current - 1).fadeOut(2000);

}

$(document).ready(function () {

    var layerSpeed = 5000; //set duration for each slide here

    // timer for large image fader
    var layerTimer = setInterval(function () {
        layerScroll();
    }, layerSpeed);


});

//-->
</script>

    <style type=text/css>
 

      .rounded_edges {
          -moz-border-radius: 10px;
          border-radius: 10px;
          border: 1px solid black;
      }
      #main {
          width: 100%;
          margin: 0 auto;
          top:0;
          left: 0;
          right: 0;
          bottom: 0;
          position: absolute;
          overflow: hidden;
          z-index: 1;
      }
      /* ==========================================================================
   Large Image Fader
   ========================================================================== */
      .ls-layer {
          position: absolute;
          display: none;
          background-position: top left;
          background-repeat: no-repeat;
          overflow: hidden;
          float: left;
          width: 100%;
      }


    </style>


</head>

<body bgcolor="#FFFFFF">
<table width="963" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
    <tr>
        <td valign="bottom" background="images/bg.jpg">
            <img src="images/tabs.jpg" width="963" border="0" usemap="#Map">
        </td>
    </tr>
    <tr>
        <td height="406" valign="top" style="position:relative; display: block;">
            <div id="main">
                <!-- LayerSlider wrapper -->
                <div id="layerslider" style="width: 100%; height: 700px; margin: 0 auto; padding: 0 ">
                    <!-- Slide 1 -->
                    <img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/kerala-scenery/kerala-nature-beautiful-scenery.jpg" alt="" />
                    <!-- Slide 2 -->
                    <img class="ls-layer" src="http://www.wallpaperswala.com/wp-content/gallery/natural-scenery/natural-scenery-photos.jpg" alt="" />
                    <!-- Slide 3 -->
                    <img class="ls-layer" src="https://d22d7v2y1t140g.cloudfront.net/m_1394387_lgdLaipbl8nw.jpg" alt="" />
                </div>
                <!-- /LayerSlider wrapper -->
            </div>
            <div id="wie_menu" style="position:absolute; width:961px; height:374px; z-index:1; visibility: hidden;">
                <div id="dropdown">
                    <table width="100%" height="334" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-width:1px; border-style:solid; border-color:#000000;" class="rounded_edges">
                        <tr valign="top">
                            <td></td>
                            <td height="5"></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr valign="top">
                            <td width="1%"></td>
                            <td width="28%" height="313">
                                <p><b><font color="#041A63" size="2" face="Verdana, Arial, Helvetica, sans-serif"><u>Personal Vehicles</u></font><font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font></b><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><br>
        <a href="linkdoc.php?ref=1" onmouseover="WIE_cltimeout();" onmouseout="MyVar1=setTimeout(function(){WIE_hidemenu()},3000);">Personal Motor</a><br>
        <a href="linkdoc.php?ref=2" onmouseover="WIE_cltimeout();" onmouseout="MyVar2=setTimeout(function(){WIE_hidemenu()},3000);">Caravan &amp; Motor Home</a><br>
        <a href="linkdoc.php?ref=3" onmouseover="WIE_cltimeout();" onmouseout="MyVar3=setTimeout(function(){WIE_hidemenu()},3000);">Motor Cycle</a><br>
       <a href="linkdoc.php?ref=4" onmouseover="WIE_cltimeout();" onmouseout="MyVar4=setTimeout(function(){WIE_hidemenu()},3000);">Multi Vehicle</a><br>
    </font>
                                </p>
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Hire</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=5" onmouseover="WIE_cltimeout();" onmouseout="MyVar5=setTimeout(function(){WIE_hidemenu()},3000);">Car Hire</a>

                                    </font>
                                </p>
                            </td>
                            <td width="37%">
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Business Vehilces </u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=6" onmouseover="WIE_cltimeout();" onmouseout="MyVar6=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Motor (up to 3.5 Tons/Fleet Single)</a>
                                    <br> <a href="linkdoc.php?ref=7" onmouseover="WIE_cltimeout();" onmouseout="MyVar7=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Motor (from 3.5 Tons to 44 Tons)</a>
                                    <br> <a href="linkdoc.php?ref=8" onmouseover="WIE_cltimeout();" onmouseout="MyVar8=setTimeout(function(){WIE_hidemenu()},3000);">Business Care (SME's Using Car For Business)</a>
                                    <br> <a href="linkdoc.php?ref=9" onmouseover="WIE_cltimeout();" onmouseout="MyVar9=setTimeout(function(){WIE_hidemenu()},3000);">Minibus</a>
                                    <br> <a href="linkdoc.php?ref=10" onmouseover="WIE_cltimeout();" onmouseout="MyVar10=setTimeout(function(){WIE_hidemenu()},3000);">Taxi</a>
                                    <br> <a href="linkdoc.php?ref=11" onmouseover="WIE_cltimeout();" onmouseout="MyVar11=setTimeout(function(){WIE_hidemenu()},3000);">Driving Instructor</a>
                                    <br>
                                    </font>
                                </p>
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Trade</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=12" onmouseover="WIE_cltimeout();" onmouseout="MyVar12=setTimeout(function(){WIE_hidemenu()},3000);">Fleet (Multiple Vehicle)</a>
                                    <br> <a href="linkdoc.php?ref=13" onmouseover="WIE_cltimeout();" onmouseout="MyVar13=setTimeout(function(){WIE_hidemenu()},3000);">Motor Traders</a>

                                    </font>
                                </p>
                            </td>
                            <td width="34%">
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Business</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=14" onmouseover="WIE_cltimeout();" onmouseout="MyVar14=setTimeout(function(){WIE_hidemenu()},3000);">Commercial Combined</a>
                                    <br> <a href="linkdoc.php?ref=15" onmouseover="WIE_cltimeout();" onmouseout="MyVar15=setTimeout(function(){WIE_hidemenu()},3000);">Tradesman Liability</a>
                                    <br> <a href="linkdoc.php?ref=16" onmouseover="WIE_cltimeout();" onmouseout="MyVar16=setTimeout(function(){WIE_hidemenu()},3000);">Landlord</a>
                                    <br>
                                    </font>
                                </p>
                                <p><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><b><font color="#041A63"><u>Lifestyle</u></font>
                                    </b>
                                    <br> <a href="linkdoc.php?ref=17" onmouseover="WIE_cltimeout();" onmouseout="MyVar17=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor &amp; Home)</a>
                                    <br> <a href="linkdoc.php?ref=18" onmouseover="WIE_cltimeout();" onmouseout="MyVar18=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor, Home &amp; Travel)</a>
                                    <br> <a href="linkdoc.php?ref=19" onmouseover="WIE_cltimeout();" onmouseout="MyVar19=setTimeout(function(){WIE_hidemenu()},3000);">Lifestyle (Motor, Home, Travel, Media)</a>
                                    <br> <a href="linkdoc.php?ref=20" onmouseover="WIE_cltimeout();" onmouseout="MyVar20=setTimeout(function(){WIE_hidemenu()},3000);">Home Building &amp; Contents </a>
                                    </font>
                                </p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <!-- <table width="960" border="0" cellspacing="0" cellpadding="0">
      <tr align="center">
        <td width="33%"><b><img src="images/box1.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box2.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box3.jpg" width="320" height="295"></b></td>
      </tr>
      <tr align="center">
        <td><b><img src="images/box4.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box5.jpg" width="320" height="295"></b></td>
        <td><b><img src="images/box6.jpg" width="320" height="295"></b></td>
      </tr>
    </table>-->
        </td>
    </tr>
    <tr>
        <td height="500" align="right" valign="top" bgcolor="#EEEEEE">&nbsp;</td>
    </tr>
    <tr>
        <td align="right" valign="top" bgcolor="#FFFFFF">
            <img src="images/complectus.jpg" width="119" height="92">
        </td>
    </tr>
</table>
<p align="center">&nbsp;</p>
<map name="Map">
    <area shape="rect" coords="-7,101,140,132" onmouseover="WIE_showmenu();">
</map>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of wilkesit
wilkesit

ASKER

What an absolutely top bloke!

I really appreciate the time and effort you have put into the answer - you're a credit to Experts Exchange.

Thanks for the advice on Javascript - I will get those books!

Again, many thanks!

Matt
Avatar of Alexandre Simões
Alexandre Simões
Flag of Switzerland image
Thanks mate!

Feel free to pay me that six pack in person if ever come to Switzerland! :)

Cheers!
Alex
Avatar of wilkesit
wilkesit

ASKER

That's a deal!

Matt :-D