Jquery改变按钮链接a的hover背景

考虑到有很多的不同的按钮图片，用:hover属性需要每个都定义，太麻烦，所以写个了js来自己换图片

$(document).ready(function(){
    var str ; //全局变量，存储原来图片的src
        $("div.autohover a").mouseover(
            function()
            {
        str = $("img",this).attr("src");
                var hover_str = getHoverImg(str);
        //alert(hover_str);
        $("img",this).attr("src",hover_str);
            });
    $("div a").mouseout(
            function()
            {
        $("img",this).attr("src",str);
            });    
        
});

//核心函数
function getHoverImg(str)
{
    //var fileNameStart = str.lastIndexOf("/");//先不取文件名
    var fileNameEndPos = str.lastIndexOf(".");
    //substr() : 第一个参数是起始位置，第二个参数是长度
    var fileName = str.substr(fileNameStart + 1,fileNameEndPos-fileNameStart-1);
    var extName = str.substr(fileNameEndPos,4); 

    //整个路径名
    var filePath = str.substr(0,fileNameEndPos);
    //重新组合成hover时的图片名，为a标签定义hover属性
    var hover_ex = "_hover"
    var hoverFileName = filePath + hover_ex + extName; 
    return hoverFileName ; 
                
}

 

这样可以将图片导航做成一个模块，用一个div包住，当然如果导航里没有其他的a标签，可以直接用nav标签 用法很简单：（这里是photoshop生成的div+css网页，所以乱了点，所以才会这样来做hover属性●︿●）

<div class="autohover">
<div class="nq3_">
         <a href="http://www.cnblogs.com/trying/admin/info.html"><img id="nq3" src="http://www.cnblogs.com/trying/admin/images/nq3.jpg" alt="" width="94" height="94" border="0" /></a>
     </div>
<div class="nq5_">
         <a href="http://www.cnblogs.com/trying/admin/360View.html"><img id="nq5" src="http://www.cnblogs.com/trying/admin/images/nq5.jpg" alt="" width="93" height="94" border="0" /></a>
     </div>

  </div>

 

/**
 * imghover_v2.js
 * 这个是为css-sprite设计的hover变换
 * 为导航容器加上class="hoverImg"
**/

$(document).ready(function(){
    var str ; //全局变量，存储原来图片的src
        $(".hoverImg a").mouseover(
            function()
            {
        str = $(this).css("background-image");
                var hover_str = getHoverImg(str);
        var hover_str = hover_str+")"; //做点处理
        //alert(hover_str);
        $(this).css("background-image",hover_str);
            });
    $("div a").mouseout(
            function()
            {
        $(this).css("background-image",str);
            });    
        
});