用图像替换表单按钮并在上面添加值

我还没有找到办法做到这一点。我想要做的是创建我自己的按钮图像（实际上每个按钮的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

用图像替换表单按钮并在上面添加值

回答

相关问题