Question

我是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>

我想用zoom_in.png和zoom_out.png替换上面代码中的放大（粗体）和缩小（粗体）文本。我也希望将图像置于网页中心，并将图像周围的背景更改为黑色。我怎么能这样做。

Answer 1

改为：

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

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

1 个答案: