텍스트가 아닌 이미지 바꾸기가 작동하지 않습니다.

저는 HTML과 CSS를 처음 사용합니다. 나는 다음과 같은 코드를 가지고 있는데, 나는 텍스트를 zoom-in 이미지와 zoom-out 이미지로 대체 할 필요가있다.
다음은 내가 (굵게)에서 줌을 교체하고 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>

입니다. 웹 페이지의 이미지를 가운데에 배치하고 이미지 주위의 배경을 검정색으로 변경하고 싶습니다. 어떻게해야합니까? 이것에

출처

2014-02-21 user3004356

변화 :

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

출처

2014-02-21 00:33:49 adt14

이 작동하지 않습니다 – user3004356

텍스트가 아닌 이미지 바꾸기가 작동하지 않습니다.

답변

관련 문제