帶有自定義圖像和文本的表單按鈕

表單按鈕具有用於未按下和按下狀態的170x60圖像。我似乎無法做到的就是在按鈕上顯示文字。我真的想避免編輯圖像並直接向其寫入文本。現在我正在使用：帶有自定義圖像和文本的表單按鈕

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

我認爲這是不可能的，使其上的文字（據我試用）。所以然後我嘗試使用<button>，但我無法讓它工作。

我已經能夠在上面的圖片上放置文字，但是文字所在的位置，按鈕是不可點擊的，不起作用。

這個問題的解決方案是什麼？

來源

2009-11-28 smont

那麼，爲什麼不在普通按鈕上編輯背景圖像？

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

這應該讓你能夠將圖像放入一個覆蓋了某些文本的按鈕。

來源

2009-11-28 03:45:34 Inaimathi

忘了提及，將輸入的value屬性設置爲任何想要顯示的文本。固定在上面。 – Inaimathi 2009-11-28 03:55:18

這樣做只是做了一個正常的按鈕與價值文本：/ – smont 2009-11-28 04:02:20

你可以使用CSS來做到這一點。 '.mybutton {background-image：url（'normal'）} .mybutton：active {background-image：url（'pressed.png'）}' – caiosm1005 2013-07-08 21:35:29

爲什麼不只是使用CSS和「提交」類型？

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

然後在你的CSS：

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

這將很好的工作與「按鈕」類型，並擁有超過JavaScript代碼的優勢，因爲JavaScript沒有被激活。

爲了使這項工作正常在IE中，你可以使用this script讓IE的行爲本身:)

來源

2009-11-28 03:56:12

根本不顯示圖像。只是一個正常的按鈕，我的價值在裏面。 – smont 2009-11-28 03:59:49

你使用什麼瀏覽器？我在Firefox和Epiphany（基於webkit）中測試了它。我沒有IE瀏覽器： - \ – 2009-11-28 04:02:14

下面是一個示例：http://supremerule.net/testing/button-test.html – 2009-11-28 04:06:30

的<input type="image">是指具有某種圖像映射爲按鈕。提交時，它將name.x和name.y參數發送到服務器端，它表示客戶端在圖像映射上按下的確切位置。

你顯然不想那麼做。你只是想擁有一個背景圖像的按鈕。爲此，您通常使用CSS background-image屬性（或更方便地使用background屬性）。

基本例如：

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

與正常按鈕如下：

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

編輯：用於downvoters或JS/jQuery的nitpickers：IE LTE 7確實不支持:hover在a元素之外的其他元素上也沒有:active假選擇器。以上解決方案是交叉瀏覽器兼容的。

來源

2009-11-28 04:01:35 BalusC

這個javascript是多餘的。如果您只是製作第二個CSS類.mybutton：active，它具有相同的效果，但不需要Javascript。 – 2009-11-28 04:10:15

爲什麼你低調的crossbrowser兼容的解決方案？ IE lte 7不支持那些假選擇器。 – BalusC 2009-11-28 04:14:51

哦，那好吧。它的工作，謝謝！ – smont 2009-11-28 04:23:57

帶有自定義圖像和文本的表單按鈕

回答

相關問題