CSS技研：ロールオーバーボタンで吹き出しを表示する - builder by ZDNet Japan
カーソルを重ねたときに吹き出しを表示する 今回のサンプルではリンクを設定したボタンにカーソルを重ねると、ボタンの下に吹き出しを表示するように設定した。カーソルの動作によってボタンとは別の場所に何かを表示する場合、一般的にはJavaScriptを利用するが、ここではCSSだけで設定している。 a{ display: block; width: 120px; height: 30px; overflow: hidden; } span{ display: block; width: 193px; height: 112px; background-image: url(home.png); background-repeat: no-repeat; text-indent: -9999px; cursor: pointer; } #movie span{background-image: ur
inputのimageボタンのロールオーバー
■サンプル ■ソース <input type="image" src="img/btn.gif" value="submit" tabindex="1" onmouseover="this.src='img/btn_o.gif'" onmouseout="this.src='img/btn.gif'" /> もと画像 img/btn.gif オーバー画像 img/btn_o.gif Comments otogawa | 2007/08/30 06:43 PM ＞hamaさん buttonタグってよく見るけど、まだ使ったことないですわー。css対応など他のサイトでも便利そうに聞いてるので、今度試してみますー♪java使わなくてもオーバーできたら便利ですもんね。 hama | 2007/08/09 08:17 AM http://kikky.net/pc/css_ir.html B
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
