用圖像替換表單按鈕並在上面添加值

我還沒有找到辦法做到這一點。我想要做的是創建我自己的按鈕圖像（實際上每個按鈕的2個圖像用於翻轉效果），並在圖像頂部添加標題。第一部分非常簡單，但我找不到標題部分的方法。我的項目包括許多按鈕，每個按鈕的頂部顯示不同的值（100個表格按鈕 - 每個數字0-99一個）。因此，創建200張圖像然後編輯它們以將數字置於頂部並不是一個好主意。我真的很想知道的是，如果我可以使用圖像而不是默認按鈕，並在頂部添加一個值，如在窗體按鈕中：然後我可以將此行放在循環內並動態填充頁面。所以我只需要爲我的按鈕創建2個圖像。用圖像替換表單按鈕並在上面添加值

任何想法？無論如何，謝謝。

來源

2011-04-26 user711250

@ user711250您懸停圖片看http://www.alistapart.com/articles/sprites – Samuel 2011-04-26 13:26:42

我剛剛其實前幾天這樣做的一個項目。這裏是我所做的CSS，示例圖像和html。

<style> 
.rollover, 
.rollover:visited { 
    background: #FFF url(http://i.stack.imgur.com/yWGMJ.gif) no-repeat scroll left 0px; 
    border: none; 
    cursor: pointer; 
    width: 64px; 
    height: 27px; 
} 

.rollover:hover { 
    background: #FFF url(http://i.stack.imgur.com/yWGMJ.gif) no-repeat scroll left -27px; 
} 
</style> 
<input type="button" class="rollover" name="btn_1" value="1" /><br /> 
<input type="button" class="rollover" name="btn_2" value="2" /><br /> 
<input type="button" class="rollover" name="btn_3" value="3" /><br /> 
<input type="button" class="rollover" name="btn_4" value="4" /><br />

來源

2011-04-26 13:28:12

謝謝你，它似乎工作。我將不得不修改它，以符合我的期望。但這是一個不錯的開始。謝謝！ – user711250 2011-04-26 13:57:31

您可以創建一個將該圖像作爲背景圖像的CSS，並將該CSS與某個組件一起使用，例如<a>標籤可在其上顯示文本。

CSS：

.myClass{ 
    background: url(/iamges/img.png); 
    //-- some other css values 
} 

.myClass:hover{ 
     background: url(/iamges/img_hover.png); 
     //-- some other css values 
    }

HTML：

<a onClick="func()" class="myClass">1</a>

來源

2011-04-26 13:17:32

用圖像替換表單按鈕並在上面添加值

回答

相關問題