Created
February 15, 2012 15:15
-
-
Save ChrisMoney/fc42f9d31479df93e463 to your computer and use it in GitHub Desktop.
Javascript - Show multiple sprite images on mouseover
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Show multiple sprite images on mouseover | |
| <head> | |
| <title> | |
| <style type = "text/css"> | |
| #b_products { | |
| display: block; | |
| float: left; | |
| width: 260px; | |
| height: 149px; | |
| background-image:url("../images/b_new_products.png"); | |
| background-position: 0% 0%; | |
| background-repeat: no-repeat; | |
| } | |
| #b_products a { | |
| display:block; | |
| width: 249px; | |
| height: 149px; | |
| } | |
| #b_products span { | |
| display: none; | |
| } | |
| <script type = "text/javascript: src = "../js/jquery.min.js"></script> | |
| <script type = "text/javascript"><script> | |
| <script type = "text/javascript"> | |
| $($document).ready(function() { // When the page is ready | |
| /* first image show */ | |
| $("#b_products").mouseover(function() { setTimeout('$("#b_products").css("background-position", | |
| "left center"); ', 400) | |
| $(this).mousemove(function() { setTimeout('$("#b_products").css("background-position", "left bottom"); ' , 1800); | |
| }) close first image slide | |
| }) close second image slide | |
| }) close doc ready | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment