0

私のhtmlコードは

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

この画像をクリックするとボタンとして表示されるようにしたいのですが、クリックしたときにルックアンドフィールをボタンとして表示するのを手伝ってくれる人はいますか..助けてください..よろしくお願いします!!

4

6 に答える 6

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();" />
于 2012-08-21T09:03:15.143 に答える
0

こんな風に作りたいなと思います。マップ タグ 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>
于 2013-04-23T07:25:12.020 に答える
0

ちょっと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

于 2012-08-21T09:02:10.483 に答える
0 
.buttonwrap {
  border: 3px outset gray;
  background-color: lightgray;
}

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

しかし、buttonwrap div は実際には である必要があり、 aを にA入れることはできないため、imgtext を a に変更します(または単に削除します)。DIVASPAN

于 2012-08-21T08:59:32.927 に答える
0

<button>thenを使用しないのはなぜですか。

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

パディング、境界線、背景色などをいじることはできますが、これはボタンのような動作を作成するための最も基本的な設定です。本物のボタンにするだけです。

于 2012-08-21T09:03:18.573 に答える
0

アリエルの答えにもう 1 つのスタイルを追加します。

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

.buttonwrap:active {
  border-style: inset;
}
于 2012-08-21T09:04:18.833 に答える