Solved

Code to change background image of table

Posted on 2013-11-13
14
375 Views
Last Modified: 2013-11-14
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

0
Comment
Question by:wilkesit
  • 8
  • 6
14 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39644596
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/
0
 

Author Comment

by:wilkesit
ID: 39644780
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
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39644851
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.
0
 

Author Comment

by:wilkesit
ID: 39644954
Thanks for your help but I can't get it to work!
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39645091
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.
0
 

Author Comment

by:wilkesit
ID: 39645712
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!
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39646089
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!
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39646092
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/
0
 

Author Comment

by:wilkesit
ID: 39646504
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

0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39647138
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

0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39647160
Thanks for the six pack offer mate, but really it's no big effort :)
I'm in this to help and to learn so no sweat!!!

As you're new to web dev I would recommend some quick reading and trainings.
Web has it's own flaws and awesomeness and it involves a lot of technologies and languages.
Mastering them all just by attempt will end up in frustration.
Picking some good books will help a lot and for me I personally prefer video training for rump ups in technologies.

For videos I have a PluralSight.com subscription.
You'll find trainings on everything you need there. From HTML to CSS, Javascript, different server-side technologies, MVC, NoSql databases, ... you name it! :)

Honestly I learned a lot just by being curious and inspecting websites with FireBug to see how things were done. This is a great thing about web... there's no magic, it's all right there! :)

For books I really liked the Javascript ones, specially:
http://www.amazon.fr/gp/product/0596806752/ref=oh_details_o03_s00_i01?ie=UTF8&psc=1
http://www.amazon.fr/gp/product/059680279X/ref=oh_details_o03_s00_i00?ie=UTF8&psc=1

But if you're really starting on it start with this one:
http://www.amazon.fr/JavaScript-Good-Parts-Douglas-Crockford-ebook/dp/B0026OR2ZY/ref=sr_1_1?ie=UTF8&qid=1384413598&sr=8-1&keywords=javascript+the+good+parts

A good advise I can give you with javascript is to actually learn it well even if you're using jQuery. Mastering Javascript is not easy although it looks very simple and familiar if you come from other curly braces language.

With 30 years of development experience you'll be answering questions here in no time :)

Cheers mate!!
0
 

Author Closing Comment

by:wilkesit
ID: 39647296
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
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39647389
Thanks mate!

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

Cheers!
Alex
0
 

Author Comment

by:wilkesit
ID: 39647641
That's a deal!

Matt :-D
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now