Nút biểu mẫu có hình ảnh và văn bản tùy chỉnh

Question

Nút biểu mẫu có hình ảnh 170x60 cho trạng thái không được nhấn và nhấn. Những gì tôi dường như không thể làm là đến đó để có văn bản trong nút. Tôi thực sự muốn tránh phải chỉnh sửa hình ảnh và viết văn bản trực tiếp. Hiện tại tôi đang sử dụng:

<input type="image" src="img/button_normal.png" 
width="175" height="60" onmousedown="this.src='img/button_pressed2.png'" 
onmouseup="this.src='img/button_normal.png'"> 

Tôi thấy rằng không thể thực hiện công việc này với văn bản trên đầu trang (theo như tôi đã thử). Vì vậy, sau đó tôi đã thử sử dụng <button> nhưng tôi không thể làm cho nó hoạt động.

Tôi đã có thể đặt văn bản lên hình ảnh ở trên, nhưng văn bản ở đâu, nút không thể nhấp được, nút này không hoạt động.

Giải pháp cho vấn đề này là gì?

Answer 1

Vậy tại sao không chỉ chỉnh sửa hình nền trên nút thông thường?

<script type="text/javascript" src="picker/js/jquery.js"></script> 
<!-- some time later --> 
<input type="button" src="img/button_normal.png" 
width="175" height="60" value="Some Text" 
onmousedown="$(this).css({'background-image': 'img/button_pressed2.png'});" 
onmouseup="$(this).css({'background-image': 'img/button_normal.png'});"> 

Điều đó sẽ cho phép bạn đặt hình ảnh vào nút có một số lớp phủ văn bản.

Answer 2

Tại sao không chỉ sử dụng css và loại "gửi"?

<input type="submit" class="myButton" value="Label goes here" /> 

Sau đó, trong CSS của bạn:

input.myButton{ 
    background-image: url('img/button_normal.png'); 
    border-style:none; 
} 
input.myButton:hover{ 
    background-image: url('img/button_pressed2.png'); 
} 
input.myButton:active{ 
    background-image: url('img/button_normal.png'); 
} 

này sẽ chỉ làm việc tốt với các "nút" loại, và có một lợi thế hơn các phiên bản Javascript vì Javascript không nhất thiết phải được kích hoạt.

Để làm công việc này đúng trong IE, bạn có thể sử dụng this script để làm cho IE tự xử :)

Answer 3

Các <input type="image"> có nghĩa là để có loại một bản đồ hình ảnh như nút. Khi được gửi, nó sẽ gửi thông số name.x và name.y đến phía máy chủ biểu thị vị trí chính xác nơi khách hàng đã nhấn trên bản đồ hình ảnh.

Bạn rõ ràng không muốn có điều đó. Bạn chỉ muốn có một nút có hình ảnh . Đối với điều đó, bạn thường sử dụng thuộc tính CSS background-image cho (hoặc, thuận tiện hơn, thuộc tính background).

dụ cơ bản:

.mybutton { 
    background-image: url('normal.png'); 
    width: 175px; 
    height: 60px; 
} 
.mybutton.pressed { 
    background-image: url('pressed.png'); 
} 

với nút bình thường như sau:

<input 
    type="submit" 
    class="mybutton" 
    value="" 
    onmousedown="this.className+=' pressed'" 
    onmouseup="this.className=this.className.replace(' pressed', '')" 
> 

Sửa: cho downvoters hoặc nitpickers JS/jQuery: IE lte 7 không không hỗ trợ :hover cũng không phải :active giả mạo trên các phần tử khác so với phần tử a. Các giải pháp trên là crossbrowser tương thích.