Css| News | Show this idea comes from Komodo Media, using offsets to replace a background image is no longer a novelty, but it is rare to combine techniques and applications so perfectly.
This scheme is to use the pure CSS to achieve artificial selection ratings, dynamic display of the selection status, and support links.
Demo http://www.rexsong.com/blog/attachments/200601/13_011003_ratings_selector.htm
The structure code is simply no longer simple:
<ul class= "Star" >
<li><a href= "#" title= "Rate this 1 star out of 5" class= "One-star" > </a></li>
<li><a href= "#" title= "Rate this 2 stars out of 5" class= "Two-stars" > </a></li>
<li><a href= "#" title= "Rate this 3 stars out of 5" class= "Three-stars" > </a></li>
<li><a href= "#" title= "Rate this 4 stars out of 5" class= "Four-stars" > </a></li>
<li><a href= "#" title= "Rate this 5 stars out of 5" class= "Five-stars" > </a></li>
</ul>
All CSS tips are applied to this 20*40px picture:
Define the base container, which is just enough to tile 5 pictures, and the height only shows the top half of the picture unchecked:
. star {list-style:none; position:relative; margin:0; padding:0; width:100px; height:20px;
Background:url (13_010531_star_rating.gif) top left repeat-x;}
Define each cell, and trigger the lower part of the display picture selected state, note to use absolute positioning method:
. Star Li a {display:block; width:20px; height:20px; z-index:2; position:absolute; padding:0;}
. Star Li A:hover {background:url (13_010531_star_rating.gif) bottom left; z-index:1; left:0;}
The last is to define the offset of each cell separately, and the chain contact hair can control width:
. Star A.one-star {left:0}
. Star A.one-star:hover {width:20px}
. Star A.two-stars {left:20px}
. Star A.two-stars:hover {width:40px}
. Star A.three-stars {left:40px}
. Star A.three-stars:hover {width:60px}
. Star A.four-stars {left:60px}
. Star A.four-stars:hover {width:80px}
. Star A.five-stars {left:80px}
. Star A.five-stars:hover {width:100px}
Test success in IE6.0 and FF1.5 environments
