jQuery Forum

Hi,

I have seen many posts in forums 'almost' answering the question I have but nothing quite solves the problem.

I have an image 600px wide and 1600px tall. Only 600px x 400px is visible. (there are 4  600px x 400px images together on this one image.)

I am simply trying to hover a list item which then moves this image (in a different div) upwards to reveal the lower parts of the image.  Hovering over each li item moves the image up to reveal a different 600px x 400px section.

I cant do it using pure CSS3 or with jquery. Any help would be appreciated please.


   <script>
      $(document).ready(function () {
           $("#button1").hover(
            function() {
            $(".rollingimage").css({"top":"-400px"});
        });  
    });
   </script>
   
<div class="mainimage">
 
    <div class="rollingimage">
    <img src="IMG/four-pics.png">
    </div><!--end of rollingimage-->
  
  
    <ul id="rollover">
    <li id="button1">Button 1</li>
    <li id="button2">Button 2</li>
    <li id="button3">Button 3</li>
    <li id="button4">Button 4</li>
    </ul>   
   
</div><!--end of mainimage-->



Thanks

Gary