用圖像替換按鈕

我已成功用圖像替換了該按鈕。但看起來圖像被放置在按鈕的頂部。我不希望放入我的CSS，因爲有其他樣式重疊，我不想有任何重定向頁面。用圖像替換按鈕

<button type="reset"><img src="images/cancel.png" width="15"></button>

來源

2012-07-08 JLearner

'<按鈕類型= 「復位」>'，你的意思'input'？ – 2012-07-08 05:06:16

....爲什麼這個問題有「php」標籤？ – itachi 2012-07-08 05:06:52

這個會給你一個按鈕。它實際上與輸入相同。只是如果我改變輸入=圖像，它不能自動調出按鈕的重置功能。 – JLearner 2012-07-08 05:07:44

爲此在CSS！

button { 
    background-image: url(images/cancel.png); 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    /* put the height and width of your image here */ 
    height: 50px; 
    width: 200px; 
    border: none; 
} 

button span { 
    display: none; 
}

那麼你的按鈕：

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

您還可以添加符覆蓋默認按鈕的行爲 - 例如-webkit-appearance: none;但我相信，這足以做你的需要。

來源

2012-07-08 05:12:58 artlung

您可以在此教我如何在按鈕頂部添加工具提示嗎？必須將其放入我的CSS？ – JLearner 2012-07-08 05:22:18

@ user976050增加了一個「title」屬性，爲了你的目的，這可能會做到這一點。 – artlung 2012-07-08 05:28:09

很好，那就行了！非常感謝！ – JLearner 2012-07-08 05:32:12

爲什麼你需要按鈕？

你可以嘗試刪除的按鈕標籤，並嘗試以下任一：

<img src="images/cancel.png" width="15" onClick="document.form1.reset();">

或

<a href="#" onClick="document.form1.reset();"><img src="images/cancel.png" width="15"></a>

只需用表格名稱替換「Form1的」。

來源

2012-07-08 05:16:32 bigmoof

不能這樣做，因爲我不想重置我的整個表單，裏面還有其他項目。 – JLearner 2012-07-08 05:18:06

<button type="reset" width="15" style="background-image: url('images/cancel.png');"/>

來源

2012-07-08 05:37:48 osyan

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script> 
     function change(thi) { 
      debugger; 
      thi.setAttribute("src", "guitar.jpg"); 
      thi.innerHTML = ""; 
      thi.outerHTML = thi.outerHTML.replace(/button/g, "img"); 
     } 
    </script> 
</head> 
<body> 
    <button onclick="change(this)">OUR BUTTON</button> 
</body> 
</html>

來源

2017-04-04 11:55:34

用圖像替換按鈕

回答

相關問題