Hide and show images by mouse event

[Prashanthpacchu]

Hi

I am developing an website. So in that i m trying to make like an image slide show. just like in www.habtoor.com. But i am using 3 buttons on leftside. 6 images are used for this 3 buttons. It means 2 images for each button. One ia on mouse over and anthor is on mouse out. Along with this, when mouse over on any particular button it displays the respective image on right side.so for right side i am using 3 images. when mouseover on any particular button on leftside it display an respective image by hiding other 2 images. so til this point i wrrten an code.
The code as shown below.

<!-- head part -->
<!-- This script is for hide nd show images on right side -->
 
<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>
 
<!--This script is for images used for button, I musing 2 images for each button(green nd white) --> 
 
 <SCRIPT LANGUAGE="JavaScript">
 
greenoverview = new Image();
greenoverview.src = "http://bytes.com/images/iskanwap/green_over.jpg";
whiteoverview = new Image();
whiteoverview.src = "http://bytes.com/images/iskanwap/white_over.jpg";
 
greenconstruction = new Image();
greenconstruction.src = "http://bytes.com/images/iskanwap/green_con.jpg";
whiteconstruction = new Image();
whiteconstruction.src = "http://bytes.com/images/iskanwap/white_con.jpg";
 
 
greenreal = new Image();
greenreal.src = "http://bytes.com/images/iskanwap/green_real.jpg";
whitereal = new Image();
whitereal.src = "http://bytes.com/images/iskanwap/white_real.jpg";
 
construction = new Image();
construction.src = "http://bytes.com/images/iskanwap/green_over.jpg";
 
</script>
<style type="text/css">
 
 
#top-zone{overflow:visible; width:960px; margin:0 auto; height:20px;} /*Here to keep images hidden in IE mostly*/
<!-- end of head part -->
 
<!-- Body part -->
<!-- this is the body part, 1st <td> contain 1st button with 2 images --> 
 
<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://bytes.com/images/iskanwap/white_over.jpg" border=:"0"></a></span></td>
 
<!-- this <td> tag contain right part images -->
 
<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="http://bytes.com/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="http://bytes.com/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="http://bytes.com/images/iskanwap/real_estate.jpg" border="0" /></span></div>
</td>
</tr>
 
<!-- below 2 row contain a 2 button--> 
 
<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://bytes.com/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="http://bytes.com/images/iskanwap/white_real.jpg" border=0/></a></span></td>
</tr>
 
<!-- End of body part -->
 

Now what i want is when mouse out of all these images. It should behave like an slide show. By heightlighting an each button by changing the image of the button by keeping the other 2 button images same. Along with the respective image on right side.
Thankoyu. ANyone knows solution for my problem please help.

[johny10151981]

<div style="cursor: pointer; color: white; width: 100px; height: 30px; line-height: 30px; font-weight: bold; background-image: url(webapp/gui/img/normal.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; " 
            align="center" onmouseover="this.style.background='url(webapp/gui/img/onmouseover.png)'" onmouseup="this.style.background='url(webapp/gui/img/onmouseover.png)'" onmousedown="this.style.background='url(webapp/gui/img/onclick.png)'" onmouseout="this.style.background='url(webapp/gui/img/normal.png)'" 
            onclick="getStaticAction('Reports','SaveBankTranseferCharge','TransferCharge='+document.getElementById('TransferCharge').value+'&RecordId=<?=$DateRange?>',function(textReturn){if(textReturn=='failed') alert('Data Saving Failed'); else alert('Saved Successfully');});">Save</div>
 

get the clue from here

[Prashanthpacchu]

Thanku for replying.
But i am using 6 images simultaniously when mouseout. Even in this also i want to hide some images respectively. That is what i am not getting. Please tel me how to do that one.