Özel resim ve metin içeren Form Düğmesi

Question

Biçim düğmesine basılmayan ve basılan durumlar için 170x60 boyutunda bir görüntü vardır. Yapamadığım şey, düğmenin metnini almaktır. Resmi düzenlemek ve ona doğrudan metin yazmaktan kaçınmak istiyorum. Şu anda kullanıyorum: I (ben denedim kadarıyla) o bunun üstüne metinle bu işi yapmak için imkansız olduğunu düşündüm

<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'"> 

. Bu yüzden <button> kullanmayı denedim ama işe yaramadı.

Yukarıdaki resmin üzerine metin koyabiliyorum, ancak metnin olduğu yerde, düğme çalışma dışı bırakılır, bu da çalışmaz.

Bu sorunun çözümü nedir?

Answer 1

Neden arka plan resmini normal bir düğmede düzenlemiyoruz?

<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'});"> 

Bu, size bir görüntüyü bir kağıda overlaid olan bir düğmenin içine yerleştirme yeteneği vermelidir.

Answer 2

Neden css ve "submit" tipi kullanmıyoruz? Ardından CSS'nizde

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

:

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'); 
} 

Bu "düğmesi" türüyle gibi iyi iş ve JavaScript etkinleştirilmelidir zorunda değildir çünkü JavaScript sürümleri üzerinde bir avantaja sahip olacaktır.

IE kendisini davranması :)

Answer 3

<input type="image"> düğmesi gibi bir görüntü haritasının tür olması kastedilmektedir yapmak için this script kullanabilirsiniz IE düzgün bu işi yapmak için. Gönderildiğinde, istemcinin görüntü haritasında bastığı tam konumu gösteren sunucu tarafına bir name.x ve name.y parametresi gönderir.

Açıkçası buna sahip olmak istemezsiniz. Sadece background görüntüsüyle bir düğmeniz olmasını istiyorsunuz. Bunun için normal olarak (veya daha uygun olarak, background özelliği) CSS background-image özelliğini kullanın.

Temel örnek: Normal düğmesiyle

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

şöyle:

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

Düzenleme: downvoters veya JS/jQuery nitpickers için: IE LTE 7 değil destekler :hover neelemanından başka :active pseudoselektörler. Yukarıdaki çözüm çapraz crossrower ile uyumludur.