A simple js mouseover switching effect_javascript skills

I wrote a simple switching effect for a friend last time. It is super simple, but also quite applicable. Because it uses CSS Sprite technology, the DEMO comes with IE6-compatible png JS.

Core JavaScript code: Click here to view DEMO

Copy code The code is as follows:

//@Mr.Think Get the object Attribute compatible methods
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 switches the display of text and background image positions
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 is the best way to load the mouse event
window.onload=function(){
var liitem=$("i_blognav").getElementsByTagName("li ");
for(var i=0; iliitem[0].onmouseover=function(){iLeftNav("writeblog")}
liitem[1] .onmouseover=function(){iLeftNav("sharepic")}
liitem[2].onmouseover=function(){iLeftNav("writemsg")}
}
}

This article is a simple mouse over effect, which can also be achieved with CSS, but it is relatively cumbersome. If you need a cooler and more dazzling effect, you can click here to view the bubble prompt effect based on jQuery written by cssrain.
Original text Published on Mr.Think's personal blog: http://mrthink.net/script-mousechange-simple/