Color and black and white alternating-image effects in each part of the photo

<style> ul {width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url ( /study/2006_12_25/2006122516414543849.jpg)} li {list-style-type:none; width:100px; height:100px; Float:left} li a {dis Play:block; width:100px; height:100px; Text-decoration:none; Background:transparent URL (http://www.jb51.net/upload/20072795511179.jpg) no-repeat 500px 500px; } a#item1:hover {background-position:0 0;} A#item2:hover {background-position: -100px 0;} A#item3:hover {background-position: -200px 0;} a#item4:hover {background-position:0 -100px;} A#item5:hover {background-position: -100px-100px;} A#item6:hover {background-position: -200px-100px;} a#item7:hover {background-position:0 -200px;} A#item8:hover {background-position: -100px-200px;} A#item9:hover {background-position: -200px-200px;} </style> <ul> <li> </li> <li> </li> <li> </li> < Li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Let's look at the code first.

<style>
ul {width:300px; height:300px; margin:0px auto; padding:0px; overflow:hidden; background:transparent url (/study/2006_12_25/2006122516414543849.jpg) }
Li {list-style-type:none; width:100px height:100px; float:left}
Li a {display:block; width:100px ; Text-decoration:none;
 background:transparent url (/study/2006_12_25/2006122516411012132.jpg) no-repeat 500px 500px ;
A#item1:hover {background-position:0 0;}
A#item2:hover {background-position: -100px 0;}
A#item3:hover {background-position: -200px 0;}
A#item4:hover {background-position:0 -100px;}
A#item5:hover {background-position: -100px-100px;}
A#item6:hover {background-position: -200px-100px;}
A#item7:hover {background-position:0 -200px;}
A#item8:hover {background-position: -100px-200px;}
A#item9:hover {background-position: -200px-200px;}
</style>

<ul>
<li><a id= "Item1" href= "#" title= "Item 1" > </a></li>
<li><a id= "item2" href= "#" title= "Item 2" > </a></li>
<li><a id= "Item3" href= "#" title= "Item 3" > </a></li>
<li><a id= "Item4" href= "#" title= "Item 4" > </a></li>
<li><a id= "ITEM5" href= "#" title= "Item 5" > </a></li>
<li><a id= "Item6" href= "#" title= "Item 6" > </a></li>
<li><a id= "Item7" href= "#" title= "Item 7" > </a></li>
<li><a id= "ITEM8" href= "#" title= "Item 8" > </a></li>
<li><a id= "Item9" href= "#" title= "Item 9" > </a></li>
</ul>

is not very simple, and we use the picture is only the following 2 pictures

Now we'll analyze the usage of background-position: The first time the background position is set to background-position:500px 500px, and its size is only 100px*100px, So all the backgrounds under a label are beyond the visual range, and the Black-and-white photo we saw at the beginning is the UL background image. Then when the mouse moved to a element, and then according to the position of each a element to set their background movement size, so that the black and white image above the alternating effect.