Jquery 替换图像而不是文本不起作用_Jquery_Html_Css

Jquery 替换图像而不是文本不起作用

jquery html css

Jquery 替换图像而不是文本不起作用,jquery,html,css,Jquery,Html,Css,我不熟悉HTML和CSS。我有以下代码，我需要将文本放大和缩小替换为放大图像和缩小图像。下面是代码 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js

我不熟悉HTML和CSS。我有以下代码，我需要将文本放大和缩小替换为放大图像和缩小图像。
下面是代码

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
  <style type='text/css'>
    .imgs{
        position:relative;
        width:70px;
        height:70px;
        z-index:100;
    }
    .imgs div{
        position:absolute;
        top:0px;
        left:15px;
        font-size:20px;
        color:red;
        font-weight:bold;
    }
    .imgs div span{
        cursor:pointer;
    }
  </style>
  <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    var totalImgs=$('img').length;

    $('img').each(function(){
        var imgSel=$(this);
        var imgActualWidth = $(this).width();
        $(this).wrap( "<div class='imgs'></div>" );
        var par=$(this).parent();
        par.css({'z-index':''+totalImgs+''});
        totalImgs=totalImgs-1;
        par.append("<div><span>**zoom-in**</span>&nbsp;&nbsp;<span>**zoom-out**</span></div>");
        par.children('div').on('click','span:nth-child(1)',function(){
            imgSel.width(imgSel.width()+imgActualWidth);
        });
        par.children('div').on('click','span:nth-child(2)',function(){
            if(imgSel.width()>imgActualWidth)
            {
            imgSel.width(imgSel.width()-imgActualWidth);
            }
        });
    });
    });//]]>  

    </script>
    </head>
    <body>
       <img src="images/course_layout.jpg"/>
    </body>
    </html>


.imgs{
位置：相对位置；
宽度：70px；
高度：70像素；
z指数：100；
}
.imgs分区{
位置：绝对位置；
顶部：0px；
左：15px；
字体大小：20px；
颜色：红色；
字体大小：粗体；
}
.imgs分区跨度{
光标：指针；
}
//imgActualWidth）
{
imgSel.width（imgSel.width（）-imgActualWidth）；
}
});
});
});//]]>

我想用zoom_in.png和zoom_out.png替换上面代码中的放大（粗体）和缩小（粗体）文本。我想在网页的图像中心以及改变周围的图像背景为黑色。如何执行此操作。

更改为：

<div><span>**zoom-in-image**</span>&nbsp;&nbsp;<span>**zoom-out-image**</span></div>

**放大图像****缩小图像**