Hi
I am creating an website using php. i am using javascript for slide show, 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.
this is head part code
<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 = “images/iskanwap/green_over.jpg”;
whiteoverview = new Image();
whiteoverview.src = “images/iskanwap/white_over.jpg”;
greenconstruction = new Image();
greenconstruction.src = “images/iskanwap/green_con.jpg”;
whiteconstruction = new Image();
whiteconstruction.src = “images/iskanwap/white_con.jpg”;
greenreal = new Image();
greenreal.src = “images/iskanwap/green_real.jpg”;
whitereal = new Image();
whitereal.src = “images/iskanwap/white_real.jpg”;
construction = new Image();
construction.src = “images/iskanwap/green_over.jpg”;
</script>
this is the body part
<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=“images/iskanwap/white_over.jpg” border=:“0”></a></span></td>
<td rowspan=“4”>
<div id=“defaultDiv” class=“mybox” style=“background-image:url(‘images/iskanwap/over.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”><img src=“images/iskanwap/over.jpg” onmouseover=“image1.src=greenoverview.src;” onmouseout=“image1.src=whiteoverview.src;” border=“0”/></span></div>
<div id=“constructionDiv” class=“mybox” style=“display:none;”:><span onmouseover=“HideDIV(‘defaultDiv’);HideDIV(‘overviewDiv’)” style=“cursor:pointer”><a href=“construction.php” onMouseOver=“image2.src=greenconstruction.src;” onMouseOut=“image2.src=whiteconstruction.src;”><img src=“images/iskanwap/CONSTRUCTION2.jpg” border=“0” /></span></div>
<div id=“realDiv” class=“mybox” style=“display:none;”:><span onmouseover=“HideDIV(‘defaultDiv’);HideDIV(‘overviewDiv’)” style=“cursor:pointer”><a href=“realestate.php” onMouseOver=“image3.src=greenreal.src;” onMouseOut=“image3.src=whitereal.src;”><img src=“images/iskanwap/real_estate.jpg” border=“0” /></span></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=“images/iskanwap/white_con.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=“images/iskanwap/white_real.jpg” border=0/></a></span>