minmax.js
使い方は読み込むのみ！！
しかもスクリプト本体でIEのみ読み込むようにしてくれているので、モダンブラウザでは存在がなくなる。
素晴らしいです。

ありがとうございます。

関連する投稿

• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.3 （背景画像編）
• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1
• [CSS] dtとddをfloatで横並びをすると、dlの背景が消えてしまうバグの回避方法
• [CSS] cssだけでImage Galleryを作る

ようやく見つけましたよ。
png指定も簡単で、且つ、background指定諸々にも耐えうるJS！！

DD_belatedPNG
09/11/04現在の最新バージョンは0.0.8aのようですが、とにかく最新バージョンをダウンロードします。

使い方は、まずHTMLにjsファイルを読み込みます。
もう一つHTML側に、透過pngを使いたいタグ名やclass名をドンドン追加していきます。
公式ページのUsageには以下のソースが載っています。

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');

  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->

この

DD_belatedPNG.fix(‘.png_bg’);

のカッコの中に追加していくわけです。

fix(‘.example1, .example2, img’);

みたいに。

これだけ。これだけでマウスオーバーにも耐えうるし、連続背景左上から、とかの指定も可能。
凄い・・・・かなり嬉しい・・・・
透過pngのない世界って、もう面倒くさくって振り返る気が起きなくなっちゃいますね。

関連する投稿

• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1
• [Cording] IEでmin-heightやmax-widthを使えるようにするJavascript
• [CSS] dtとddをfloatで横並びをすると、dlの背景が消えてしまうバグの回避方法
• [CSS] cssだけでImage Galleryを作る
• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.2 （ナビゲーションボタンでのロールオーバー編）

アルファ画像を扱うalphafilter.jsライブラリ
これです。
他にも数々あれど、ロールオーバーをこんなに簡単に作れるものを私は探せませんでしたよ。作者さまありがとうございます。
使い方は本家サイト見てもらった方が早いのですが、
まずは

<script type="text/javascript" defer="defer" src="js/alphafilter.js"></script>

を読み込みます。
このとき必要なのがdefer="defer"　これを忘れるとうまくいきません。
そのあと必要なことが、
透過pngを使いたいタグやimgにclass="alphafilter"をつけてあげること。
ロールオーバー表現をCSSで作る場合はそれ用のclassを作っていると思うので、それを
class="alphafilter btn"
みたいにして指定してあげればOK。
ちなみに、
ロールオーバー表現は2009/5に追加されていたんですね。
本当に感謝です！

関連する投稿

• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.3 （背景画像編）
• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1
• [AS3] TextFieldにアルファをかける方法

でも普通のやりかたじゃぁダメなんですよねぇ～
CSSとHTMLタグでがんばってコーディングしちゃうと、できたとしてもマークアップ的にはNGになってしまう。。
もっといいやり方ないんかな？と探していると、やっぱりありました。
インターネットってすばらしいですね？

ボックス全体をリンクにしたい

（上記の方法はJavascriptを使用します。）
作者さまありがとうございます。
元ネタはほかの方ですが、私はJqueryを使用する「Red様」のコードで実装してみました。

まずHTMLのheadの中に以下を加えます。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
	var linkboxes = $(".linkbox");
		for (var i=0; i<linkboxes.length; i++){
		var readmores = $("p.readmore");
		for (var j=0; j<readmores.length; j++){
			$(".linkbox").click(function() {
				var anchorTags = this.getElementsByTagName("a");
				window.location = anchorTags[0].href;
			});
		}
	}
	$("p.readmore").addClass("none");
	$(".linkbox").hover(function(){
		$(this).addClass("box_hover");
		},
		function(){
		$(this).removeClass("box_hover");
	});
});
-->
</script>

次にCSS側でボックスの装飾をします。
上のJavascript内でボックスのクラスは「linkbox」
リンク先が記させたpタグのクラスは「readmore」
ボックス上にHoverさせた時は「box_hover」

となっているので、それを使って装飾・・・・

.linkbox{
	background:url(../images/menu_btn_bg.jpg) repeat-x bottom #e4fbd9;
	color:#333;
	padding:10px 10px 0;
	margin:0 0 15px;
	border:1px solid #ccc;
	border-bottom:1px solid #999;
	border-right:1px solid #999;
	width:580px;
}
.box_hover{
	background:#eeeeee;
	cursor:pointer;
}
.none{
	text-indent:-9999px;
	height:0px;
	overflow:hidden;
}
.linkbox h5{
	color:#3c2f13;
	font-size:1.8em;
	margin:0 0 5px;
	padding:0;
	font-weight:bold;
.linkbox p{
	letter-spacing:0.01em;
}
.linkbox p.floatL{
	float:left;
	margin:0 20px 0 0;
	padding:0;
}

で実際のHTMLコードはこんな感じになります。

<div class="linkbox">
        <p class="floatL"><img src="images/noimg_s.jpg" alt="no-image" width="120" height="80" /></p>
        <h5>Nail</h5>
        <p>内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。内容が入ります。</p>
        <p class="readmore Clear"><a href="#">リンクはこちら</a></p>
 </div>

見事！マウスオーバーもきれいに決まり、ソースもきれい。

Javascriptを切っている方は、

<p class="readmore Clear"><a href="#">リンクはこちら</a></p>

の部分が表示され、ここからリンク先に飛べる仕組みです。
ボックス全体にかけているリンクは切れますが、表示も大幅に崩れることがなく、リンク先も死にません。

関連する投稿

• [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！ CSSバージョン
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編
• [Cording] Cssだけでディスプレイの真ん中に表示するTips
• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] リスト「li」を使ったデザインTIPS