背景画像にだけ透明度を適用する
文字は不透明のまま背景画像だけに透明度を指定したいことがあります。
透明度はタグに対し、設定されますので、背景画像と文字が同じタグにある場合、文字だけ不透明にすることはできません。
ここでは、半透明にした背景画像のタグの上に不透明の文字を重ねる方法で、文字だけ不透明にしてみました。
背景画像だけ透明度を適用するサンプル
半透明な背景画像に不透明な文字を重ねたサンプルです。マウスオーバーすると背景画像が不透明になるようにしてみました。
サンプル： 背景画像だけ透明度適用
サンプルのソースコード
js_dom_bkimgtrp.html では、背景画像と不透明な文字を重ねる場所として class="frm" のタグを作りました。その中に、背景画像（透明度設定）用の class='bkg' と、つづけて文字（不透明）用の class='dom' を作りました。
js_dom_bkimgtrp.html のソースコード
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<script type="text/javascript" src="js_dom_bkimgtrp.js"></script>
<link href="js_dom_bkimgtrp.css" rel="stylesheet" type="text/css">
<title>JavaScript DOM class 背景画像だけ半透明にする</title>
</head>
<body>
<h1>JavaScript DOM class 背景画像だけ半透明にする</h1>
<p>マウスオーバーで背景画像の透明度を変える</p>
<div class="frm">
<div class='bkg'><br><br>bkgに書かれた文字は透明度が適用される</div>
<div class='dom'>dom1</div>
</div>
<div class="frm">
<div class='bkg'></div>
<div class='dom'>dom2</div>
</div>
</body>
</html>
js_dom_bkimgtrp.css では、"fir" にレイアウト設定をし、"bkg" と "dom" は、ちゃんと重なるように幅と高さを同じ値に設定します。重なりを確認できるよう、"bkg" は赤枠、"dom" は黒枠にしました。ちゃんと重なれば、赤枠に黒枠が乗り、赤は見えなくなります。
"fir" には、position:relative; を設定します。これで、"fir" が子のタグに abusolute 設定した場合の基準位置になります。"bkg" には、absolute 指定していませんが、"fir" の直後に書かれていますので、top と left は、0 位置に配置されます。"dom" には、"bkg" に重なるように position:absolute; と top:0px; left:0px; を指定します。これで、背景画像に、文字を載せることができました。
js_dom_bkimgtrp.css のソースコード
h1 {
font-size:100%;
}
/* .bkg と .dom を重ねるためのフレーム */
.frm {
position:relative;
margin:10px;
float:left;
}
/* 背景用 */
.bkg {
border:solid #f00 1px;/* 赤枠 */
width:200px;
height:100px;
opacity: 0.5;/* chrome,safari,opera */
-moz-opacity: 0.5;/* firefox */
filter:alpha(opacity=50);/* IE */
}
/* 文字用 */
.dom{
position:absolute;
top:0px;
left:0px;
border:solid #000 1px;/* 黒枠 */
width:200px;
height:100px;
}
js_dom_bkimgtrp.js の説明をします。
関数 srchclss() は、イベントの発生したオブジェクトの前にある兄弟 DOM を探し、見つけたオブジェクトを返します。IE だけなら、previousSibling を使えばうまくいきますが、Firefox などでは、タグの間の空白も node としてカウントされますのでうまくいきません。そこで、このような関数が必要になります。引数 preobj には、イベントの発生したオブジェクト、clssname には、見つけたいオブジェクトの クラス名 を入れます。マウスオーバーで、背景画像を不透明にしたいために、こんな関数を作りました。背景画像のタグに、あとから文字のタグを重ねているため、背景画像のタグでは、うまくイベントが発生しません。そこで、文字タグでイベントを発生させ、イベントが発生したとき、この関数で背景画像のタグを探しています。
あとは、じっくりソースコードを読んでください。今までの勉強で、きっと理解できます。
js_dom_bkimgtrp.js のソースコード
/*** 同じレベルで前にある兄弟DOMオブジェクトを返す ***
preobj 探す基準になるオブジェクト
clssname 探すクラスの名前
結果：見つかったオブジェクトを返す
*/
function srchclss (preobj,clssname){
ckbkg_obj = preobj.previousSibling;
while (ckbkg_obj) {
if (ckbkg_obj.className == clssname) break;
ckbkg_obj = ckbkg_obj.previousSibling;
}
return ckbkg_obj;
}
//dom がマウスオーバーされたら色を変更
function f_dom(e) {
if(!e) e = event;//for Windows
// 前にある class="bkg" のオブジェクトを探す
ckbkg_obj =srchclss (this,"bkg");//独自関数
if ( e.type == "mouseover"){
// イベントが mouseover のとき
ckbkg_obj.style.filter = "alpha(opacity=100)";
ckbkg_obj.style.MozOpacity = 1;
ckbkg_obj.style.opacity = 1;
} else {
// イベントが mouseover 以外のとき
ckbkg_obj.style.filter = "alpha(opacity=50)";
ckbkg_obj.style.MozOpacity = 0.5;
ckbkg_obj.style.opacity = 0.5;
}
}
//ページが読み込まれたらイベントをセットする
window.onload = function(){
// 全てのタグを探す
var tags = document.getElementsByTagName("*");
// 抜き出すタグを入れるオブジェクトを定義
var obj=new Object();
obj.length=0;
// 抜き出すタグ名
var selecttags = "dom";
// 抜き出すタグ名に一致した class を探す
for(var i=0,L=tags.length;i<L;i++){
if(tags[i].className==selecttags){
obj[obj.length]=tags[i];
obj.length++;
}
}
// 抜きだした class にイベントハンドラーセット
for(i=0,L=obj.length;i<L;i++){
obj[i].onmouseover=f_dom;
obj[i].onmouseout=f_dom;
// 前にある class="bkg" を含むオブジェクトを探す
ckbkg_obj =srchclss (obj[i],"bkg");//独自関数
// みつかったオブジェクトに背景画像を貼り付ける
eval('ckbkg_obj.style.backgroundImage = "url(js_dom_img/cntnts'+i+'.gif)"');
}
}
この方法で、うまく動作していますが、IE の場合、背景画像のタグに書いた（半透明の）文字にマウスが乗った場合、文字タグに設定したイベントが外れてしまうようです。文字が無い場合は、問題ありません。サンプルをご確認ください。理由は解りませんでした。わかる方がいらっしゃったら教えてくだされば助かります。
