AboutPricingCommunityTeamsStart 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

JavaScript
Avatar of undefined
Last Comment
wilkesit
8/22/2022 - Mon
Alexandre Simões
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/
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
Alexandre Simões
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.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
wilkesit
ASKER
Thanks for your help but I can't get it to work!
Alexandre Simões
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.
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!
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Alexandre Simões
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!
Alexandre Simões
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/
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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Alexandre Simões
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
Alexandre Simões
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
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
Alexandre Simões
Thanks mate!

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

Cheers!
Alex
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
wilkesit
ASKER
That's a deal!

Matt :-D
Plans and Pricing
Resources
Product
Podcasts
Careers
Contact Us
Teams
Certified Expert Program
Credly Partnership
Udemy Partnership
Privacy Policy
Terms of Use

© 1996-2023 Experts Exchange, LLC. All rights reserved. Covered by US Patent