[B! ロールオーバー][CSS] julia28dfのブックマーク

画像ロールオーバー時にボーダーを表示してもレイアウトを崩さないCSSトリック:phpspot開発日誌

Image Rollover Borders That Do Not Change Layout 画像ロールオーバー時にボーダーを表示してもレイアウトを崩さないCSSトリック。ロールオーバー時に、border指定すると、次のように、普通は崩れてしまいますが、それを崩さない方法。 ↓↓崩れてないサンプル↓↓ 画像の中にボーダーが引かれ、レイアウトに影響がない例 overflowとmarginを使ったテクニックでこれが可能みたいです。地味だけど、知っておかないと詰まってしまいそうな必須のテクニックかもしれませんね。関連エントリ便利なＣＳＳテクニック３０選 CSSとdivを使った画像先読みテクニックページ全体に枠線をつけるCSSテクニックサイズの大きい画像を背景にする際のCSSテクニック

julia28df 2009/03/17

リンク

JavaScriptを使わずにやるimg要素のロールオーバーサンプル

本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます）昔作ったサンプルでそんなようなのがありました。横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。その他、本来背景として使う予定だった画像を一枚にまとめる。とかが、ぱっと浮かびました。んで、グローバルナビゲーションに限っては、img要素で配置する事

julia28df 2008/06/05

リンク

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で画像をプリロードする方法（改一番簡単な画像置換の方法画像置換でメニューを作る画像

julia28df 2007/07/18

リンク

ソースがシンプルなJSによるロールオーバー｜CSS HappyLife

Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。（あ、音声ブラウザを配慮したらという場合です）さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")

julia28df 2007/06/21

リンク

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