jquery - 如何使图像在单击时表现为按钮？

Question

我的html代码是

<div align="center">
          <div class="buttonwrap"><div class="imgtext">Renew Your Policy</div></div>  
       </div>

我希望此图像显示为单击它的按钮。任何人都可以帮助我在单击它时将其外观和感觉设置为按钮..请帮助我..提前致谢！

Answer 1

嗨，您可以使用 CSS 将真正的按钮宽度设置为图像作为背景

input.button {
    background: url('path_to_your_image') o o no-repeat;
    border: 0;
    overflow: hidden;
    text-indent: 500px;
}

<input type="button" class="button" onclick="your_function();" />

或者

<input type="submit" class="button" onclick="your_function();" />

或者你可以做

<img src="path_to_your_image" onclick="your_function();" />

Answer 2

.buttonwrap {
  border: 3px outset gray;
  background-color: lightgray;
}

.buttonwrap:active {
  border-style: inset;
}

但是 buttonwrap div 真的应该是 an A，你不能把 aDIV放在 anA所以将 imgtext 更改为 a SPAN（或者干脆去掉它）。

Answer 3

我想你想做这样的。使用地图标签 http://www.w3schools.com/tags/tag_map.asp

enter code here

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

Answer 4

嘿，Ekta，你看起来像这样吗：- http://tinkerbin.com/XOblz5U7

更新的答案

.button在后台定义背景图片

HTML

<div align="center">
  <div class="buttonwrap"><div class="imgtext"><input type="button" class="button" value="Renew Your Policy"/></div></div>  
   </div>

CSS

.button {
background:red;
width:150px;
height:50px;
}

查看更新的演示：- http://tinkerbin.com/E30xfTi8

Answer 5

为什么不使用<button>then 呢？

<div align="center">
  <button class="buttonwrap">
        <span class="imgtext">Renew Your Policy</span>
  </button>  
</div>

你可以乱用填充、边框、背景颜色等等，但这是创建类似按钮行为的最基本设置。只要把它变成一个真正的按钮。

Answer 6

我会在 Ariel 的回答中再添加一种风格：

.buttonwrap {
  cursor:pointer;
  border: 3px outset gray;
  background-color: lightgray;
}

.buttonwrap:active {
  border-style: inset;
}