A practical and simple switch with the mouse over the switch effect, with a simple switch effect that ie6 is compatible with pngjs that was last written to a friend, which is super simple, but also applicable. because CSS Sprite technology is used, the DEMO includes JS that is IE6 compatible with png.
Core JavaScript code: click here to view the DEMO
The Code is as follows:
// @ Mr. Think: How to Get Object Property compatibility
Function $ (objectId ){
If (document. getElementById & document. getElementById (objectId )){
Return document. getElementById (objectId); // W3C DOM
} Else if (document. all & document. all (objectId )){
Return document. all (objectId); // MSIE 4 DOM
} Else if (document. layers & document. layers [objectId]) {
Return document. layers [objectId]; // NN 4 DOM .. this won't find nested layers
} Else {
Return false;
}
}
// @ Mr. Think switch between the position of the displayed text and background image
Function iLeftNav (type ){
Var inum, I _navinfo =$ ("I _navinfo ");
If (type = "writeblog "){
Inum = "-300px ";
} Else if (type = "sharepic "){
Inum = "-600px ";
} Else if (type = "writemsg "){
Inum = "-900px ";
} Else {
Inum = "-300px ";
}
I _navinfo.innerHTML = $ (type). innerHTML;
I _navinfo.style.backgroundPosition = inum + "0 ";
}
// @ Mr. Think load the mouse over the event
Window. onload = function (){
Var liitem = $ ("I _blognav"). getElementsByTagName ("li ");
For (var I = 0; I Liitem [0]. onmouseover = function () {iLeftNav ("writeblog ")}
Liitem [1]. onmouseover = function () {iLeftNav ("sharepic ")}
Liitem [2]. onmouseover = function () {iLeftNav ("writemsg ")}
}
}
This article is a simple way to use CSS, but it is cumbersome. if you need a cool and cool effect, click here to view the jQuery-based Bubble tip written by cssrain.
Mr. Think's blog: http://mrthink.net/script-mousechange-simple/