IE6で透過pngを使用可能にする「alphafilter.js」が、ロールオーバーに対応して嬉しい | Katt Weblog
IE6で透過pngを有効にする「alphafilter.js」がロールオーバーにも対応して、凄く便利になっていたので嬉しくて投稿。 配布元及び詳しい使用方法は、かの有名なto-R様。 みなさん凄い人ばかりで尻込みしてしまいます・・・。 使い方は本当に簡単。まずはダウンロードした「alphafilter.js」を、例のごとくhead要素内で読み込み。この時、読み込みを高速化させるためdefer属性の記述をする点がポイントみたいです。 あとは透過にしたい画像にclass=”alphafilter”を付加するだけで、IE6でも透過pngの使用が可能になります。 透過機能と併せてロールオーバー機能を使用する場合は、デフォルトの画像が「sample.png」ならロールオーバー後の画像は「sample_on.png」のように拡張子の前に「_on」を付加した画像を作ってデフォルト画像と同階層にアップ。
フェードインでロールオーバーできるjQueryプラグイン「hoverFade」
メニューなどのインターフェイスの仕掛の一つとしてスタンダードな手法ロールオーバー。自分が今、何を触っているのかがすぐに分かるUI向上のためには常識的なものです。今回紹介するのはそんなロールオーバー処理をフェードインで表現するjQueryプラグイン「hoverFade」を紹介したいと思います。 本の少しの違いですが、通常のロールオーバーに比べると作りこんだ感じを受けます。とくにメニュー部分などユーザーの目が触れやすく、常に触る部分への実装はクオリティを高く見せるためにも重要なのではないかなと思います。 詳しくは以下 プラグインのサイズはわずか、1.4KBミニマムなものであれば1KBを切る超軽量なプラグインとなっていますので、サイトの負担にならず実装することが可能です。実装自体もCSSのクラス名を調整するだけと、非常にシンプルなものになっています。 サイトにもう一工夫欲しいというかたは是非どう
jQuery：画像一つでもロールオーバー効果 | in hiding.
メニューの数が多いサイトで、そのメニューすべてにロールオーバー効果を仕込もうとするとメニューの数だけロールオーバー用の画像を作成しプリロードしなければならないですよね。先日手がけたサイトではトップページだけでもメニュー含めロールオーバー部分がが30個以上あって大変でした。 マウスオーバー時に画像が変わる場合はやっぱりそれだけ用意しなければなりませんが、例えばマウスオーバー時に濃くなるという仕様であればこの方法がなかなか使えたのでメモ。 用意するものはｊQuery本体と画像一つ。スクリプトは下記のようになります。 <script type="text/javascript"> function FlashBlock() { /*ページ読み込み時に画像の透明度を50％にする*/ $(".FlashBlock").fadeTo(100, 0.5); /*マウスオーバー・アウト時の処理*/
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://miracle-ysdesign.com/blog/javascript/443.html