2013-04-13 2 views
0

나는이 JQuery와 사용자의 대화가 :이 같은 이미지에 버튼 입력을 변경하려면있어JQuery와 사용자의 대화 버튼

<!-- jQuery UI dialogs --> 
    <div class="widget">  
     <div class="head"><h5 class="iAlert">jQuery UI dialogs</h5></div> 
     <div class="body aligncenter"> 

      <div class="uDialog"> 
       <div id="dialog-message" title="Download complete"> 
        <p><img src="images/icons/color/tick.png" alt="" class="icon" />Your files have downloaded successfully into the My Downloads folder.</p> 
        <p>Currently using <strong>36% of your storage space</strong></p> 

        <div class="uiForm"> 
         <form action="" class="mainForm"> 
          <input type="text" value="http://" name="inputtext"/> 
          <input type="radio" name="question1" checked="checked" /><label>Selected radio</label> 
          <input type="radio" name="question1" /><label>Normal state</label> 
         </form> 
        </div> 
       </div> 
       <!-- Sample page content to illustrate the layering of the dialog --> 
       <input type="button" value="Usual jQuery UI dialog" class="blueBtn" id="opener" /> 
      </div> 

     </div> 
    </div> 

:

<a href="#" title=""class="btn55 mr10"><img src="images/add.png" alt="" /><span>Add</span></a> 

있는 방법이 있습니까?

+0

입력 버튼을 사용자 정의하여 이미지를 대신 사용 하시겠습니까? – trajce

+0

네, 맞습니다. – user2112020

답변

0

당신은 바이올린을 만들 수 있습니까?

/* this is general selector, if you want to target specific element, then add class or id*/ 
    input[type="button"] 
    { 
     width:120px;/*these are just some sample width and height*/ 
     height:30px; 
     background: url('http://www.google.com/images/srpr/logo4w.png') center no-repeat;/*set your image as background of the input.*/ 
    } 
0

예를 Fiddle

에 입력

.blueBtn { 
    background-image: url('http://www.psdgraphics.com/wp-content/uploads/2009/07/push-button.jpg'); 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-position: center; 
    height: 40px; 
    width: 50px; 
} 

또는과의 클래스를 사용 :
여기 당신이 이런 식으로 작업을 수행 할 수 있습니다 입력에 대한 링크 jsfiddle.net/trajce/yhQeZ/
입니다 배경 규칙 조합

.blueBtn { 
    background: url('http://www.psdgraphics.com/wp-content/uploads/2009/07/push-button.jpg')no-repeat center; 
    background-size: 100% 100% ; 
    height: 40px; 
    width: 50px; 
}