[B! ロールオーバー] 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

リンク

Curo.jp : CSS:マウスオーバーしたときに1px右下にずらす

リンクをマウスオーバーしたときに１px右下にずらすのはやめろぉぉぉ！ガタガタガタってしたくなっちゃうから、さ！ということで、下のCuro.jpという文字列にカーソルを合わせてみてください。右下にちょっとずれるのが分かるでしょうか。「ガタガタガタ」というのは、リンクの上側または左側ギリギリにカーソルを当てると、そうなります。これはもう「ガタガタガタ」としか言いようがない。（Firefox2はガタガタしました。Internet Explorer6, Opera9は大丈夫でした。） position これは、リンクをマウスオーバーしたときに数pxほど右下にずらすようにCSS（スタイルシート）で以下のように設定されています。 a:hover { top:1px; left:1px; position:relative; } なんで右下にずらすのか。おそらくはボタンを押したときのような感覚を狙

julia28df 2007/07/05

RSSのボタンがいいかも

ロールオーバー

リンク

jQueryのプラグイン、jQuery_Autoで画像のロールオーバー - Webtech Walker

Home Archive jQueryのプラグイン、jQuery_Autoで画像のロールオーバー jQueryのプラグイン、jQuery_Autoで画像のロールオーバー 2007年06月21日 category:javascript Comment(0) Trackback(1) CSS HappyLifeさんでjavascriptによるイメージロールオーバーの記事を書かれていたので、触発されて以前から書こうと思っていたjQueryネタを書きます。ロールオーバー｜CSS HappyLife jQueryならロールオーバーのプラグインくらいあるだろうと思って探していたら、jQuery_Autoというものを見つけたので使ってみました。今回はロールオーバーのみ説明しますが、簡易なタブも作成できるようです。このプラグインの利点はclass指定でロールオーバーを指定す

julia28df 2007/06/26

リンク

ソースがシンプルな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