pngの半透明

css javascript

IEのフィルターを設定したブロック内のアンカーがクリックできない不具合回避。
http://blog.webneta.net/archives/2006/09/01/22/


面倒なのでそれ用のスクリプト作成。やっつけ。
参考：http://www.alistapart.com/articles/pngopacity/
-要、browser_detect.js, getElementsBySelector.js, mootools.v1.00.js。



素直にcssでやった方が楽。
filterで設定する画像のパスは、cssからではなく、htmlからのパス！

<html>
<body>
<div id="hoge">
  <p><a href="#">hogehoge</a></p>
  <div class="alpha"></div>
</div>
<div class="moge">mogemoge</div>
<div class="moge">mogemoge</div>
</body>
</html>

body {
  background:url( bg.jpg );
}

div {
    margin: 1em;
    border: 1px solid #858583;
}

#hoge {
    width: 450px;
    height: 200px;
}
html > body #hoge {
    background: url( hoge.png ) no-repeat;
}
html > body #hoge div.alpha {
    display:none;
}

* html div#hoge {
    position: relative;
}
* html div#hoge p {
    position: absolute;
    z-index:2;
}
* html div#hoge div.alpha {
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 450px;
    height: 200px;
    z-index: 1;
    border: 0;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hoge.png,sizingMethod=scale);
}

div.moge {
    height:100px;
    width: 40%;
    float:left;
}
html > body div.moge {
    background: url( hoge.png ) no-repeat;
}
* html .moge {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hoge.png,sizingMethod=scale);
}


再トライ。
id:oppara:20070520