User:Benjamin Miller

From OpenWetWare

(Difference between revisions)
Jump to: navigation, search
Line 5: Line 5:
     <script type="text/javascript">
     <script type="text/javascript">
     $(document).ready(function(){
     $(document).ready(function(){
-
       $('#test').mouseover(function() {
+
       $('#side1').mouseover(function() {
-
       $('#test').animate({backgroundPosition: '0px 0px'}, 1000);
+
       $('#side1').animate({backgroundPosition: '0px 0px'}, 1000);
       });
       });
-
       $('#test').mouseleave(function() {
+
       $('#side1').mouseleave(function() {
-
       $('#test').animate({backgroundPosition: '-250px 0px'}, 1000);
+
       $('#side1').animate({backgroundPosition: '-250px 0px'}, 1000);
 +
      });
 +
$('#side2').mouseover(function() {
 +
      $('#side2').animate({backgroundPosition: '0px 0px'}, 1000);
 +
      });
 +
      $('#side2').mouseleave(function() {
 +
      $('#side2').animate({backgroundPosition: '-250px 0px'}, 1000);
 +
      });
 +
$('#side3').mouseover(function() {
 +
      $('#side3').animate({backgroundPosition: '0px 0px'}, 1000);
 +
      });
 +
      $('#side3').mouseleave(function() {
 +
      $('#side3').animate({backgroundPosition: '-250px 0px'}, 1000);
       });
       });
     });
     });
</script>
</script>
   <style type="text/css">
   <style type="text/css">
-
   #test {
+
   #side1 {
     width: 250px;
     width: 250px;
     height: 100px;
     height: 100px;
     background: url(http://openwetware.org/images/d/df/Imperialigemsideone.jpg) -250px 0px no-repeat;
     background: url(http://openwetware.org/images/d/df/Imperialigemsideone.jpg) -250px 0px no-repeat;
     position: absolute;
     position: absolute;
-
     top: 60px;
+
     top: 50px;
 +
    left: 650px;}
 +
#side2 {
 +
    width: 250px;
 +
    height: 100px;
 +
    background: url(http://openwetware.org/images/6/66/Imperialigemsidetwo.jpg) -250px 0px no-repeat;
 +
    position: absolute;
 +
    top: 200px;
 +
    left: 650px;}
 +
#side3 {
 +
    width: 250px;
 +
    height: 100px;
 +
    background: url(http://openwetware.org/images/e/ea/Imperialigemsidethree.jpg) -250px 0px no-repeat;
 +
    position: absolute;
 +
    top: 350px;
     left: 650px;}
     left: 650px;}
   </style>
   </style>
  </head>
  </head>
  <body>
  <body>
-
   <div id='test'>
+
   <div id='side1'>
 +
  </div>
 +
  <div id='side2'>
 +
  </div>
 +
  <div id='side3'>
   </div>
   </div>
  </body>
  </body>
 +
</html>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<html>
</html>
</html>

Revision as of 10:50, 16 September 2010
















Personal tools