Hi
I am creating an website using php. i am using javascript for slide show, Iwant slideshow like its in [U][Al Habtoor Group](http://www.habtoor.com)[/U]. In my website i using a 6 button images in leftside.I mean 2 images for 1 button, i.e 1 is when mouseout and other is when mousehover. So when we moves mouse on any button out of 3 it should heightlight dat particular button and its show resprctive image on right side. I did up to this. But what i want is, when we move mouse out that whole part, then this work like slideshow. i.e by automatically moves to next button heighlighting by changing button image with respective image on rightside.If anyone not understood my expalnation given above just see the website i mentioned above. i want exactlylike dat(Flash not required).
this is head part code
<style type="text/css">
.mybox
{
width:732px;
height:216px;
border-style:none;
border-width:0px;
padding:0px;
}
</style>
<script type="text/javascript" language="JavaScript">
function HideDIV(d)
{
document.getElementById(d).style.display = "none";
}
function DisplayDIV(d)
{
document.getElementById(d).style.display = "block";
}
</script>
<SCRIPT LANGUAGE="JavaScript">
greenoverview = new Image();
greenoverview.src = "http://www.sitepoint.com/forums/images/iskanwap/4.jpg";
whiteoverview = new Image();
whiteoverview.src = "http://www.sitepoint.com/forums/images/iskanwap/oman.jpg";
greenconstruction = new Image();
greenconstruction.src = "http://www.sitepoint.com/forums/images/iskanwap/5.jpg";
whiteconstruction = new Image();
whiteconstruction.src = "http://www.sitepoint.com/forums/images/iskanwap/cons.jpg";
greenreal = new Image();
greenreal.src = "http://www.sitepoint.com/forums/images/iskanwap/6.jpg";
whitereal = new Image();
whitereal.src = "http://www.sitepoint.com/forums/images/iskanwap/real.jpg";
construction = new Image();
construction.src = "http://www.sitepoint.com/forums/images/iskanwap/4.jpg";
</script>
this is body part code.
<table width="990" align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td><span onmouseover="HideDIV('defaultDiv');HideDIV('constructionDiv');HideDIV('realDiv');DisplayDIV('overviewDiv')" onmouseout="HideDIV('defaultDiv');HideDIV('realDiv');HideDIV('constructionDiv');DisplayDIV('overviewDiv')"style="cursor:pointer"><a href="overview.php" onMouseOver="image1.src=greenoverview.src;" onMouseOut="image1.src=whiteoverview.src;"><img name="image1" src="http://www.sitepoint.com/forums/images/iskanwap/oman.jpg" border=:"0"></a></span></td>
<td rowspan="4">
<div id="defaultDiv" class="mybox" style="background-image:url('images/iskanwap/8.jpg'); background-position:left; background-repeat:no-repeat; border:0"></div>
<div id="overviewDiv" class="mybox" style="display:none;":><span onmouseover="HideDIV('defaultDiv');DisplayDIV('overviewDiv')" style="cursor:pointer"><a href="overview.php" onMouseOver="image1.src=greenoverview.src;" onMouseOut="image1.src=whiteoverview.src;"><img src="http://www.sitepoint.com/forums/images/iskanwap/8.jpg" border="0"/></a></div>
</div>
<div id="constructionDiv" class="mybox" style="display:none;":><span onmouseover="HideDIV('defaultDiv');HideDIV('overviewDiv');DisplayDIV('constructionDiv')" style="cursor:pointer"><a href="construction.php"><img src="http://www.sitepoint.com/forums/images/iskanwap/7.jpg" border="0" /></a></div>
</div>
<div id="realDiv" class="mybox" style="display:none;"><span onmouseover="HideDIV('defaultDiv');DisplayDIV('realDiv')" onmouseout="HideDIV('defaultDiv');DisplayDIV('realDiv')" style="cursor:pointer"><a href="realestate.php"><img src="http://www.sitepoint.com/forums/images/iskanwap/9.jpg" border="0" /></a></div>
</td>
</tr>
<tr>
<td><span onmouseover="HideDIV('defaultDiv');HideDIV('overviewDiv');HideDIV('realDiv');DisplayDIV('constructionDiv')" onmouseout="HideDIV('defaultDiv');HideDIV('overviewDiv');HideDIV('realDiv');DisplayDIV('constructionDiv')" style="cursor:pointer"><a href="construction.php" onMouseOver="image2.src=greenconstruction.src;" onMouseOut="image2.src=whiteconstruction.src;"><img name="image2" src="http://www.sitepoint.com/forums/images/iskanwap/cons.jpg" border=0></a></span></td>
</tr>
<tr>
<td><span onmouseover="HideDIV('defaultDiv');HideDIV('overviewDiv');HideDIV('constructionDiv');DisplayDIV('realDiv')" onmouseout="HideDIV('defaultDiv');HideDIV('overviewDiv');HideDIV('constructionDiv');DisplayDIV('realtDiv')" style="cursor:pointer"><a href="realestate.php" onmouseover="image3.src=greenreal.src;" onmouseout="image3.src=whitereal.src;"><img name="image3" src="http://www.sitepoint.com/forums/images/iskanwap/real.jpg" border=0/></a></span></td>
</tr>
<tr>
<td height="30" align="left"><img src="http://www.sitepoint.com/forums/images/iskanwap/boarder.jpg" width="257" height="30" border=0/></td>
</tr>
</table>
I also attached the txt file containing whole code of this page.
this is code i used. I need to add automatic moves when mouse is in other part of the page. Please anyone knows the logic. Solve my problem.