ホームページ > 記事 > ウェブフロントエンド > 画像をボタンのように見せる方法、つまりクリックすると押して上昇する効果を与える方法。 _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 つの画像を背景として使用し、マウスが通過または押されたときに効果的な背景に変更します。
b2fca42bb5295635c4d17bfc43ed8daa特別トピック5db79b134e9f6b82c0b36e0489ee08ed
.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 で設定すると、簡単におおよその効果を得ることができます。
922fdbb730327040401c4385d98f9d7e
関数 set(cssname,obj)
{
obj.className=cssname;
}
css:
.down(left:1px;top:1px;)
.up{left:0;top:0;}
試してみてはいかがですか
#19、うまくいきません。
#16階、CSSではなく写真を使いたいです
イベントの書き方を間違えてしまいました。 。 。
f2d78b96a3a754c1a6dc0425002c2902 function set(cssname,obj) {
obj.className=cssname;
}
css:
.down(left:1px;top:1px;)
.up{left:0;top:0;}
試してみる試してみてください
Dreamwaver ですべて書いてみましょう><