Comparison of CSS Sprites in various schemes for creating navigation floating highlight

Use only one CSS Sprites image to create a navigation menu background and hover the mouse over the highlighted background image ).

Various browsers currently have different levels of support for CSS attributes such as "background-position-X". Therefore, multiple implementation schemes are derived.

Solution 1:

<Style type = "text/CSS"> A {float: Left; width: 80px; Height: 40px; text-indent:-9999px; overflow: hidden; Background-repeat: no-Repeat;}/* normal single background X coordinate settings */. h {background-position-X: 0 ;}. X {background-position-X:-80px ;}. B {background-position-X:-160px;}/* single background image unified setting * // * normal single background y coordinate unified setting */A {background-image: URL ("http://w3school.com.cn/ I /site_bg.gif"); background-position-Y: 0;}/* single highlighted background y coordinate unified settings */A: hover { Background-position-Y:-40px; }</style> 
Solution 2:

<Style type = "text/CSS"> A {float: Left; width: 80px; Height: 40px; text-indent:-9999px; overflow: hidden; Background-repeat: no-Repeat;}/* single background image unified settings */A {background-image: URL ("http://w3school.com.cn/ I /site_bg.gif");}/* normal single background all coordinates set */. h {background-position: 0 0 ;}. X {background-position:-80px 0 ;}. B {background-position:-160px 0;}/* set all coordinates of the highlighted background */. h: hover {background-position: 0-40px ;}. x: hover {B Ackground-position:-80px-40px ;}. b: hover {background-position:-160px-40px; }</style> 
Solution 3:

<Style type = "text/CSS"> A {float: Left; width: 80px; Height: 40px; text-indent:-9999px; overflow: hidden; Background-repeat: no-Repeat;}/* All coordinates of normal multi-background settings */. h {background-position: 0 0, 0-40px ;}. X {background-position:-80px 0,-80px-40px ;}. B {background-position:-160px 0,-160px-40px;}/* normal multi-Background only displays the first background */A {background-image: URL ("http://w3school.com.cn/ I /site_bg.gif "), none;}/* highlight multiple backgrounds and only display the second background */A: HOV Er {background-image: None, URL ("http://w3school.com.cn/ I /site_bg.gif ");} </style> 
Solution 4:Solution 1 and 3 combined editions

<Style type = "text/CSS"> A {float: Left; width: 80px; Height: 40px; text-indent:-9999px; overflow: hidden; Background-repeat: no-Repeat;}/* normal single-Background X coordinate settings * // * normal multi-Background X coordinate settings */. h {background-position-X: 0; Background-position: 0 0, 0-40px ;}. X {background-position-X:-80px; Background-position:-80px 0,-80px-40px ;}. B {background-position-X:-160px; Background-position:-160px 0,-160px-40px;}/* set a single background image * // * Normal single background y coordinate unified setting * // * normal multi-Background only displays the first background */A {background-image: URL ("http://w3school.com.cn/ I /site_bg.gif "); background-position-Y: 0; Background-image: URL ("http://w3school.com.cn/ I /site_bg.gif"), none;/* must be written after a single background image property to avoid being overwritten by a single background. Browsers that do not support multi-background will ignore this attribute */}/* uniform setting of Single-Background Y coordinates * // * only display the second background when multiple backgrounds are highlighted */: hover {background-position-Y:-40px; Background-image: None, URL ("http://w3school.com.cn/ I /site_bg.gif ");} </style> 
Solution 5:In fact, it is not to change the coordinates of the background image, but to change the relative position of the embedded element.

<Style type = "text/CSS"> A {position: relative; float: Left; width: 80px; Height: 40px; text-indent:-9999px; overflow: hidden ;} /* single background image unified settings */a span {position: absolute; display: block; width: 240px; Height: 80px; Background-image: URL ("http://w3school.com.cn/ I /site_bg.gif "); background-repeat: No-Repeat;}/* set the horizontal coordinates of the normal single background */. h span {left: 0 ;}. X span {left:-80px ;}. B span {left:-160px;}/* unified setting of normal single background ordinate */a spa N {top: 0;}/* uniform setting of the vertical coordinates of the highlighted single background */A: hover span {top:-40px ;} /* Fix IE6/7/quriks mode bug */A: hover {cursor: pointer ;} </style> 
Solution 6: The simplest solution!
Use at least two CSS Sprites images, and set the coordinates at one time. The normal and highlight statuses use different images respectively.
The only drawback of this solution is to have an extra image.
Code omitted.

Test environment:
Windows XP
IE 6 ~ 8
Firefox 3.6
Firefox 10.0.2
Chrome 17
Safari 5.1
Opera 11.61