Slide Rotator - list items on slide

Hi All

I am trying to create a slide rotator. Have been successfull with that. However my problem is that over each image i need to have a div with hyperlinks. As the image slides i need the div to slide with it and on the new image i need a different div with different set of hyperlinks. My code so far is as such:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>USP International: Home</title>

        <link rel="url icon" href="site_images/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="style1.css"/>
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.searchbox').focus(function(){
                    if ($(this).val() == 'Search Our Website...')
                        $(this).val('');
                }).blur(function(){
                    if ($.trim($(this).val()) == '')
                $(this).val('Search Our Website...');
                });

                //Set Default State of each portfolio piece

                $(".paging").show();

                $(".paging a:first").addClass("active");

                //Get size of images, how many there are, then determine the size of the image reel.

                var imageWidth = $(".banner_window").width();

                var imageSum = $(".image_reel img").size();

                var imageReelWidth = imageWidth * imageSum;



                //Adjust the image reel to its new size

                $(".image_reel").css({'width' : imageReelWidth});



                //Paging + Slider Function

                rotate = function(){

                    var triggerID = $active.attr("rel") - 1; //Get number of times to slide

                    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

                    $(".paging a").removeClass('active'); //Remove all active class

                    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
                    $()



                    //Slider Animation

                    $(".image_reel").animate({

                        left: -image_reelPosition

                    }, 500 );



                };



                //Rotation + Timing Event

                rotateSwitch = function(){

                    play = setInterval(function(){ //Set timer - this will repeat itself every 5 seconds

                        $active = $('.paging a.active').next();


                        if ( $active.length === 0) { //If paging reaches the end...

                            $active = $('.paging a:first'); //go back to first

                        }

                        rotate(); //Trigger the paging and slider function

                    }, 5000); //Timer speed in milliseconds (5 seconds)

                };



                rotateSwitch(); //Run function on launch



                //On Hover

                $(".image_reel a").hover(function() {

                    clearInterval(play); //Stop the rotation

                }, function() {

                    rotateSwitch(); //Resume rotation

                });



                //On Click

                $(".paging a").click(function() {

                    $active = $(this); //Activate the clicked paging

                    //Reset Timer

                    clearInterval(play); //Stop the rotation

                    rotate(); //Trigger rotation immediately

                    rotateSwitch(); // Resume rotation

                    return false; //Prevent browser jump to link anchor

                });
    });
</script>
    </head>

    <body>
       <div class="container">
            <div class="top_bottom_strip">
            </div>

            <div id="header">
            <div id="header_logo">
                <h1><a href="http://www.usp.ac.fj">The University of the South Pacific</a></h1>
            </div>

            <div id="header_nav">
                <ul>
                    <li><a href="#">ABOUT THE USP INTERNATIONAL OFFICE</a></li>
                    <li><a href="#">TELL YOUR FRIEND ABOUT US</a></li>
                </ul>
            </div>

            <img src="site_images/twitter.png" alt="twitter" class="social_net"/>
            <img src="site_images/facebook.png" alt="facebook" class="social_net" />

            <div id="search_website">
              <form action="" method="post" name="search_website">
                <input type="text" class="searchbox" value="Search Our Website..." />
                <input type="image" src="site_images/search_button.png" class="searchbox_submit" value="" />
              </form>
            </div>
          <div id="contact_us">
                <h1><a href="#">Contact Us</a></h1>
            </div>
            <div class="clear"></div>

            <div id="site_title">
                <h1>USP International</h1>
            </div>
                <img src="site_images/logo_bottom.jpg" id="logo_bottom" alt="usp logo" />
                 <div class="banner_window" >
                      <div class="image_reel" >
                        <a href="#"><img src="site_images/banner_image_01.jpg" alt="" /></a>
                        <a href="#"><img src="site_images/banner_image_02.jpg" alt="" /></a>
                        <a href="#"><img src="site_images/banner_image_03.jpg" alt="" /></a>
                    </div>
                    <div id="image1" style="position:absolute; width:331px; height: 100px; left: 435px; top: 215px;">
                        <p>123chxgvjhgxvgjhxcgvjhgxcjhvgjhxcgvjhgxjhvgjxgvjhgxccjhvgjh</p>
                        <p>xgvjhgxjhvgjhxgvj</p>
                        </div>
                    <div class="paging">
                        <a href="#" rel="1"></a>
                        <a href="#" rel="2"></a>
                        <a href="#" rel="3"></a>
                    </div>
                </div>
                 <div class="clear"></div>
            </div>

          <div id="body_main">
                <div id="body_main_content">
                    <div id="nav_main">
                        <ul>
                            <li class="home"><a href="#">Home</a></li>
                            <li class="study"><a href="#">Study</a></li>
                            <li class="live"><a href="#">Live</a></li>
                            <li class="apply"><a href="#">Apply</a></li>
                        </ul>
                    </div>
                </div>
                <div id="quick_links">
                   <div class="quick_links_header">
                        <img src="site_images/quick_links.png" alt="quick links" />
                   </div>
                    <div class="quick_links_content">
                        <ul>
                            <li><a href="#">Find a course</a></li>
                            <li><a href="#">Find accomodation</a></li>
                            <li><a href="#">How to Apply</a></li>
                            <li><a href="#">Academic Calendar and Key Dates</a></li>
                            <li><a href="#">Prospectus</a></li>
                            <li><a href="#">Student blogs</a></li>
                            <li><a href="#">Create a blog</a></li>
                            <li><a href="#">For Parents</a></li>
                            <li><a href="#">For Agents</a></li>
                        </ul>
                    </div>
                    <br /><br />
                  <div class="quick_links_header">
                       <img src="site_images/getting_help.png" alt="getting help" /></div>
                    <div class="quick_links_content">
                        <ul>
                            <li><a href="#">FAQS</a></li>
                            <li><a href="#">Find a USP Agent</a></li>
                            <li><a href="#">How to Apply</a></li>
                            <li><a href="#">Enquire Online</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
                    </div>
                  <br /><br />
                    <div class="quick_links_content">
                           <h2>Featured Program:</h2>
                        <p>
                            kwehjhkrhwerrhjwkehrjkhwerjkhwejkrhjkwehrjkhrkjhfmbvnsdfbxcbv hsduif yfyiwu rwrwejkr huiwyrwriuywerh uwerhwjkrhweuiqrhjirhwey ruweyfyw ertyesj ryweyr yrweir w etyriuweriuyr
                        </p>
                       <ul>
                            <li><span id="contact_about_prog"><a href="#">Contact us about this program</a></span></li>
                       </ul>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div id="footer">
                <table cellspacing="0px" cellpadding="0px" id="footer_table">
                  <tr id="footer_header">
                    <td class="footer_sides"> </td>
                    <td id="footer_copyright_header"><p>Copyright & Disclaimer</p></td>
                    <td><p><a href="#">STUDY</a></p></td>
                    <td><p><a href="#">LIVE</a></p></td>
                    <td><p><a href="#">APPLY</a></p></td>
                    <td><p><a href="#">ABOUT US</a></p></td>
                    <td><p><a href="#">CONTACT US</a></p></td>
                    <td class="footer_sides"> </td>
                  </tr>
                  <tr id="footer_content">
                    <td class="footer_sides"> </td>
                    <td class="footer_cell">
                        <p>
                            © 2011 Copyright USP<br /><br />
                            USP International,<br />
                            The University of the South Pacific,<br />
                            Laucala Campus,<br />
                            Suva, Fiji<br /><br />
                            Tel: +679 323 2916<br />
                            Fax: +679 323 1504<br />
                            Email: <a href="mailto:international@usp.ac.fj">international@usp.ac.fj</a>
                        </p>
                    </td>
                    <td class="footer_cell">
                      <ul>
                          <li><a href="#">Pre-degree</a></li>
                        <li><a href="#">Udergraduate</a></li>
                        <li><a href="#">Graduate</a></li>
                        <li><a href="#">Study Abroad</a></li>
                        <li><a href="#">Exchange Students</a></li>
                        <li><a href="#">English Language Program</a></li>
                        <li><a href="#">Fees and Costs</a></li>
                        <li><a href="#">Scholarships and Finance Aid</a></li>
                        <li><a href="#">Travel Opportunities</a></li>
                        <li><a href="#">Support Services</a></li>
                      </ul>
                    </td>
                    <td class="footer_cell">
                      <ul>
                          <li><a href="#">Orientation and Events</a></li>
                          <li><a href="#">Facts and Figures</a></li>
                          <li><a href="#">Campuses and Maps</a></li>
                          <li><a href="#">Photos and Videos</a></li>
                          <li><a href="#">Cost of Living</a></li>
                          <li><a href="#">Facilities</a></li>
                          <li><a href="#">Banking</a></li>
                          <li><a href="#">Accomodation</a></li>
                          <li><a href="#">Entertainment</a></li>
                          <li><a href="#">Sports</a></li>
                          <li><a href="#">Arts and Culture</a></li>
                          <li><a href="#">Clubs and Organisations</a></li>
                          <li><a href="#">Visas and Immigration</a></li>
                          <li><a href="#">Student Support</a></li>
                      </ul>
                    </td>
                    <td class="footer_cell">
                        <ul>
                            <li><a href="#">Entry Requirements</a></li>
                            <li><a href="#">English Requirements</a></li>
                            <li><a href="#">Admission Process</a></li>
                            <li><a href="#">Application Checklist</a></li>
                            <li><a href="#">Forms</a></li>
                        </ul>
                    </td>
                    <td class="footer_cell">
                        <ul>
                            <li><a href="#">Introduction</a></li>
                            <li><a href="#">International Affiliation</a></li>
                            <li><a href="#">Agents</a></li>
                            <li><a href="#">Staff</a></li>
                            <li><a href="#">Office Location</a></li>
                        </ul>
                    </td>
                    <td class="footer_cell">
                        <ul>
                            <li><a href="#">Enquire Online</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Connect with us</a></li>
                        </ul>
                    </td>
                    <td class="footer_sides"> </td>
                  </tr>
                </table>
            </div>
            <div class="clear"></div>
            <div class="top_bottom_strip">
            </div>
          </div>
    </body>
</html>

Please any help will be appreciated

Topic Participants
buksh_s

Slide Rotator - list items on slide

Slide Rotator - list items on slide

Topic Participants

buksh_s