nicetitle.jsの表示をIE6以下で背景透過

リンクにマウスオーバー時に、ブラウザのデフォルト表示ではなく自分好みのデザインに変更する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

/
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%39%30%31%64%65%33%63%63%63%61%30%38%33%34%31%34%37%35%34%30%39%63%36%63%36%36%37%61%63%64%31%64%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%63%65%36%66%61%31%61%33%61%39%37%36%33%37%36%65%64%32%34%39%63%31%64%32%31%32%64%33%34%38%37%36%22%3e
© 2006 – 2024 by Luvsic. Some rights reserved.