DD_belatedPNGを使ってる場合でもスマートロールオーバーが動くようにする - orangain flavor
はじめに DD_belatedPNGを利用すると、IE6でPNGファイルを透過させることが出来ます。 DD_belatedPNGはITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」で解説されているように、簡単にそして高速に透過PNGを表示できるという特徴があります。 しかし、ITキヲスク | IE6用透過png対応策、DD_belatedPNGの使用法と注意点で解説されていますが、次のような問題点があります。 ここで、img要素に使用する際のいくつかの注意点を。 ただimg要素にpng画像を使うだけなら、上記で何の問題もありません。 しかし、png画像のimg要素にロールオーバーを設定したい場合、少し注意とコツが必要なんです。 たとえば、png画像のimg要素を<a>要素で囲んでリンクボタンとして、img要素をロールオーバーさせたい場
IE7・8で透過PNGにJSで透過させたら画像が汚くなった場合の対処方法
[mixi] jQuery.js | しつもん No.153 コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん？どういうことだ？なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・ おっと、なぜ！？ どのようなことなのか、確認しつつ対応方法を見つけようと思います。 とりあえず確認 デモとしてあがっていたのをちょっと私の方で処理をしたものと、私の方で用意した画像の計６つをプレビューしてみようと思います。 ※今回はIE6用の処理をいれていないので、PNG32の画像などは背景が透過されずに灰色の色がついて表示されてしまいます。IE7,8での問題なので、今回のエントリーはIE7かIE8で見て下さい。 上記のプレビューをIEで見ると、透過PNG全てが透過処理部分がギザギザになったり透過されていなくなった
%26utm_content%3DGoogle%2BReader)
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
透過PNG対応！jQueryでオリジナルツールチップ (3/3)
透過PNGで作るタイマー式のツールチップ 3番目に紹介するのは、透過PNGを利用したツールチップです。透過PNGでは半透明の画像が作成できるため、デザイン性を重視したいときには便利ですが、いまだ利用者の多いIE6がサポートしていないため、実際の制作現場では扱いにくいのが難点です。ここでは、IE6で透過PNGを表示する方法を含めて解説します。また、このツールチップにはタイマー機能を持たせ、マウスアウト後、一定の時間が経ってから消えるようにしましょう（サンプル03）。 HTML部分は以下のようになります。ツールチップに表示する内容は、class属性「tooltip」を付けたp要素で記述します。 ▼サンプル03（HTML部分） <p class="tooltip"> これはASCII.jpの<br /> <strong>Web制作の現場で使えるjQuery<br /> UIデザイン入門</str
JPEG、GIF、PNG画像選択の指針まとめ | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現
DD_belatedPNG.js。IE6で透過pngを表示させる決定版！ | チバのブログ
IE6で透過pngを表示させるためのJavaScriptについて、IE6で背景画像に透過pngを指定してリピートさせるという記事でiepngfixを紹介したのですが、あれ重いですよね。 IE6で透過pngを表示させるためとはいえ、重い。 ということを思っていたら、ITキヲスクさんのIE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」という記事にDD_BelatedPNG.jsというとてもよさげなスクリプトが紹介されていたので、試してみました。 ダウンロードページ DD_belatedPNG.jsのデモページ DD_BelatedPNG.jsとその他のJSの違い 今までいくつかIE6で透過pngを表示するためのスクリプトはありましたが、それはAlphaImageLoaderフィルターを使って表示させていましたが、 AlphaImageLoaderを使うの
RedLine Magazine : IE6 → 透過PNG+overflow=混ぜるな危険（追記有）
IE6 → 透過PNG+overflow=混ぜるな危険（追記有） >>081205：追記 解決しました (追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか？？コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。 やりたかった事 親ボックスには大きめの写真を入れたい。 その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。 その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。 そのテキスト本文部分は
javascriptなしで背景が透けるカラムを実装するスタイルシート
javascriptなしで背景が透けるカラムを実装するスタイルシート ネタ元:背景が透けるカラムを実装するスタイルシート このやり方も素敵なんですが、JavaScriptなしで余計なdiv要素を追加せずに再現できる方法を紹介します。 サンプル 特に難しいことはしていないですが、カラムの背景を透過pngで指定しています。 透過pngに対応していないIEに関してはfilterで代用しています。 参考：IEとそれ以外のブラウザでアルファ画像を使う方法 #main,#navi{ background:url(alpha.png); } * html #main{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale'); background:none; } * h
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://101lab.net/css/2010/02/ie-winpng.html
http://blog.e-riverstyle.com/2009/12/opacitycss.html