2014-02-21 86 views
0

我是新来的HTML和CSS。我有以下代码,我需要用放大图像和缩小图像替换文本放大和缩小。
下面是我想替换(粗体)的放大和缩小与zoom_in.png和zoom_out.png上面的代码(粗体)文本代码替换图像而不是文本

<!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> 

。我想要将图像置于网页中央,并将图像周围的背景变为黑色。我怎样才能做到这一点。

回答

0

改成这样:

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

这不是工作 – user3004356