画像をボタンのように見せる方法、つまりクリックすると押して上昇する効果を与える方法。 _html/css_WEB-ITnose

画像から作られたリンクがあります:

<a href="xxxxx.html" target="_blank"><img src="images/xxxx.jpg" width="39" height="180" border="0"></a>

さて、この画像にボタンの効果を持たせたいのですが、つまり、クリックすると押して上げる効果が得られます。どうすればよいでしょうか。

ありがとうございます！

ディスカッションに返信（解決策）

クリックすると別の写真が表示されます。

中の写真を切り替えますか?

画像を切り替える必要はありません。この 1 枚の画像だけで、ボタンの効果をシミュレートするだけです

CSS で実行し、2 つの画像を背景として使用し、マウスが通過または押されたときに効果的な背景に変更します。
特別トピック
.btn {background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif") いいえ-repeat -311px -19px;text-indent: -9999px;}
.btn:hover{background-position: -311px -468px;}

box-shadow を試してください。うまく調整すれば、希望どおりになります。望ましい結果

box-shadow、使い方は？

HTML でイベントを使用する
http://www.w3school.com.cn/html/html_eventattributes.asp

onclick スクリプト マウスがクリックされたときにスクリプトを実行します

onmousedown スクリプト マウスボタンが押されたときにスクリプトを実行します

onmouseout スクリプト マウス ポインターが要素の外に移動したときにスクリプトを実行します

onmouseover スクリプト マウス ポインターが要素の上に移動したときにスクリプトを実行します

onmouseout="this.style.color='#fff'" このスタイルはフォントを変更すると、これらの境界線を変更できます。効果は非常に明確になります。

2 日前、私は次のコードを使用して入力要素を制御しました:

<input type="text" value="用户名" name="" onfocus="if(this.value=='用户名') {this.value='';}this.style.color='#333';this.style.borderColor='#4d90fe';" onblur="if(this.value=='') {this.value='用户名';this.style.color='#333';}" onmouseover="this.style.borderColor='#888'" onmouseout="this.style.borderColor='#b9b9b9'" title="请输入用户名！" />

<input type="image" src="images/xxxx.jpg"   />

画像はボタンと同じです。

CSS を使用してさまざまな画像を表示します

使いにくいので、助けてください

マウスをホバーして左にすると画像のサイズが変わります、試してみてください。

テストされたコードはありますか? 私は初心者なのでよく理解できません

具体的な例はありますか?初心者さん、よろしくお願いします！

http://www.mayixueyuan.com/newshow.php?id=145

http://www.mayixueyuan.com/UploadFile/file/html_all/20110725_html_css_button/20110725_html_css_button.html

例。

フラッシュ ボタン

Qidian 中国語 Web サイトにアクセスしたことがありますか?
オフセットを数 PX で設定すると、簡単におおよその効果を得ることができます。

関数 set(cssname,obj)
{
obj.className=cssname;
}
css:
.down(left:1px;top:1px;)
.up{left:0;top:0;}

試してみてはいかがですか

#19、うまくいきません。

#16階、CSSではなく写真を使いたいです

イベントの書き方を間違えてしまいました。 。 。

function set(cssname,obj)

{
obj.className=cssname;
}
css:
.down(left:1px;top:1px;)
.up{left:0;top:0;}

試してみる試してみてください

Dreamwaver ですべて書いてみましょう><