Jquery 如何使图像表现为单击时的按钮？

我的html代码是

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

续保

我希望这张图片在点击时显示为一个按钮。有人能帮我在点击时使它看起来和感觉像一个按钮吗请帮助我。。 提前谢谢

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

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

---

但是buttonwrap div实际上应该是一个

A

，并且你不能将

div

放在

A

中，所以将imgtext更改为

SPAN

（或者干脆去掉它）。

嘿，Ekta你看起来像这样吗：-

更新的答案

在

按钮
背景中定义背景图像

HTML

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

请参阅更新的演示：-
您好，您可以使用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.button{
背景：url（“指向您的图像的路径”）不重复；
边界：0；
溢出：隐藏；
文本缩进：500px；
}

或



或者你可以

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


那么为什么不使用
呢

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


续保

你可以乱搞填充、边框、背景色等等，但这是创建按钮式行为的最基本的设置。只要把它做成一个真正的按钮。
我想在Ariel的回答中再添加一种风格：

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

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

我想你想这样做。使用地图标签

在此处输入代码

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


是的，但我将如何制作？你能把它的css发给我吗？因为我不想使用按钮。不，因为图像不适合那个按钮。所以我必须让图像表现为按钮。你可以在一个按钮中添加图像。把它想象成一个像按钮一样的div。如果这对你不起作用，你能举个例子吗？我能在活动模式下用其他东西代替边框样式吗：插图..它显示为边框..这看起来不太好，因为我在点击图片..@EktaShukla“像按钮一样行动”是什么意思？意味着当我点击它时，它会进入内部，就像在按钮中一样，意味着点击它会给人一种按钮的感觉。当我使用边框样式时，插入边框会显示为按钮，但插入边框会显示我不想要的内容。也许你在找这样的东西：（灵感来源：）不，我希望图像表现为按钮。不希望在按钮背景中使用图像。为什么选择“否”？这也适用于图像，它不必在背景中，只需将图像放在
A
中即可。请您解释一下A是什么意思？@EktaShukla
A
标记：

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

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

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