nicetitle.jsの表示をIE6以下で背景透過
- 投稿日 : 2007-05-11, 21:06
- 最終更新日時 : 2010-12-21 17:54:23（履歴）
- タグ（Nucleus / Javascript）
- カテゴリ（Design）
- 記し人（luvsic）[PDF]
- 閲覧数（1653）
リンクにマウスオーバー時に、ブラウザのデフォルト表示ではなく自分好みのデザインに変更するNice titles。
Nucleusではデフォルトで付いてくる機能だけれども、アルファチャンネル画像を使用した背景透過PNGはIE6では表示できない、が、それを可能にする。
（1）iepngfix.jsの場合
（1-1）headとかに記述
<!--[if lt IE 6]>
<script type="text/javascript" src="<%skinfile(iepngfix.js)%>"></script>
<![endif]-->
（1-2）nicetitle.cssへ記述
.nicetitle-content {
overflow: hidden;
background: transparent url(images/bg_nicetitle.png);
border: 1px solid #99E500;
padding: 5px;
-moz-opacity:0.9;/*Firefox only*/
opacity:0.9;/*modern browser*/
}
* html body .nicetitle-content {/*lt IE6 CSS hack*/
behavior: expression(IEPNGFIX.fix(this));
}
（2）iepngfix.htcの場合
（2-1）nicetitle.cssへ記述
.nicetitle-content {
overflow: hidden;
background: transparent url(images/bg_nicetitle.png);
border: 1px solid #99E500;
padding: 5px;
-moz-opacity:0.9;/*Firefox only*/
opacity:0.9;/*modern browser*/
}
* html body .nicetitle-content {//lt IE6 CSS hack
behavior: url(http://yourpass/iepngfix.htc);
}
ダウンロード、リンク
ダウンロード （透過PNG）bg_nicetitle.png
リンク （iepngfix.htc）透過PNG と IE と IE7
リンク （nicetitle.css、nicetitle.js）Nice titles
No comments yet