SitePoint Sponsor

User Tag List

View Poll Results: automatic slideshow when mouse out the images

Voters
0. You may not vote on this poll
  • solutions

    0 0%
  • code

    0 0%
Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question i not able find code for slideshow by highlighting respective image buttons.

    Hi

    I am creating an website using php. i am using javascript for slide show, Iwant slideshow like its in Al Habtoor Group. 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
    HTML 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.
    Attached Files Attached Files
    Last edited by ScallioXTX; Mar 25, 2011 at 04:50. Reason: wrapped code in [html][/html]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •