class に違う背景画像を貼り付ける
背景画像は、貼り付けたいタグ（オブジェクト）に id 属性が指定してあれば、CSS で id 属性に対し貼り付けたい画像を指定することができます。この方法は簡単ですが、貼り付けたい画像があるタグにすべて id 属性をつけなければなりません。
ここでは、複数ある同じクラス名のついた class 属性のタグ（オブジェクト）に順番に用意してある異なる背景画像を貼り付けてみました。
おまけで、貼り付けた画像に透明度 50% を設定し、マウスが乗ったときだけ不透明にしてみました。
class に違う背景画像を貼り付けるサンプル
まずは、サンプルでご確認ください。背景画像は、PHP と JavaScript の文字が入ったものを用意しました。
サンプル： class に違う背景画像を貼り付ける
サンプルのソースコード
js_dom_classimg.html では、背景画像を貼り付けたいタグに、class='dom' を記述しました。html に記述するのは、基本的にこれだけです。
js_dom_classimg.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_classimg.js"></script>
<link href="js_dom_classimg.css" rel="stylesheet" type="text/css">
<title>JavaScript DOM class に背景画像を順に割り当てる</title>
</head>
<body>
<h1>JavaScript DOM class に背景画像を順に割り当てる</h1>
<p>ついでに背景画像を半透明にし、マウスオーバーした時は透明ではなくする。</p>
<div class='dom'>dom1</div>
<div class='dom'>dom2</div>
</body>
</html>
js_dom_classimg.css では、dom 属性に対し、縦と横の幅と透明度を指定しています。背景画像は、次で説明する JavaScript で設定します。透明度は、ブラウザによってコードが違いますので ３種類記述してあります。透明度は、タグに設定されますので背景画像だけでなく、同じタグ内に記載された文字も半透明になってしまいます。
js_dom_classimg.css のソースコード
h1 {
font-size:100%;
}
.dom {
margin:10px;
float:left;
width:200px;
height:100px;
opacity: 0.5;/* chrome,safari,opera */
-moz-opacity: 0.5;/* firefox */
filter:alpha(opacity=50);/* IE */
}
js_dom_classimg.js では、クラス名が dom のタグをさがし、背景画像を順番に貼り付けています。また、探したタグには、イベントリスナーとイベントが発生したときの動作を定義しています。
class 名 "dom" のオブジェクトを抜き出すところまでは、class にイベントと同じです。抜き出されたオブジェクトに、背景画像を順番に貼り付けていきます。
背景画像は、サンプルファイルがあるディレクトリの js_dom_img というディレクトリの中にある画像ファイル cntnts0.gif と cntnts1.gif を使います。CSS の背景画像の設定を JavaScript で指定する方法で貼り付けます。obj[i].style.backgroundImage = "url(js_dom_img/cntnts"+i+".gif)" としたいところですが、ファイル名に変数は使えませんのでうまくいきません。こういうときは、eval を使います。
イベントリスナーが発生したとき呼ばれる f_dom では、マウスが乗ったとき背景画像を不透明にしています。
js_dom_classimg.js のソースコード
function f_dom(e) {
//dom がマウスオーバーされたら透明度を変更
if(!e) e = event;//for Windows
if ( e.type == "mouseover"){
// イベントが mouseover のとき
this.style.filter = "alpha(opacity=100)";
this.style.MozOpacity = 1;
this.style.opacity = 1;
} else {
// イベントが mouseover 以外のとき
this.style.filter = "alpha(opacity=50)";
this.style.MozOpacity = 0.5;
this.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;
// 背景画像を貼り付ける
eval('obj['+i+'].style.backgroundImage = "url(js_dom_img/cntnts'+i+'.gif)"');
}
}
