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应该是A，你不能在DIV中添加A，所以将imgtext更改为SPAN（或者只是获取）摆脱它。）

Answer 3

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

为什么不使用<button>？

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

您可以使用填充，边框，背景颜色以及所有这些，但这是创建按钮式行为的最基本设置。只需将其变成一个真正的按钮。

Answer 5

我会再向Ariel的答案添加一种风格：

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

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

Answer 6

我想你想这样做。使用地图标签 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>

如何使图像在点击时表现为按钮？

6 个答案: