class に違う背景画像を貼り付ける

背景画像は、貼り付けたいタグ(オブジェクト)に id 属性が指定してあれば、CSS で id 属性に対し貼り付けたい画像を指定することができます。この方法は簡単ですが、貼り付けたい画像があるタグにすべて id 属性をつけなければなりません。
ここでは、複数ある同じクラス名のついた class 属性のタグ(オブジェクト)に順番に用意してある異なる背景画像を貼り付けてみました。
おまけで、貼り付けた画像に透明度 50% を設定し、マウスが乗ったときだけ不透明にしてみました。

class に違う背景画像を貼り付けるサンプル

まずは、サンプルでご確認ください。背景画像は、PHP と JavaScript の文字が入ったものを用意しました。
サンプル: class に違う背景画像を貼り付ける

サンプルのソースコード

js_dom_classimg.html では、背景画像を貼り付けたいタグに、class='dom' を記述しました。html に記述するのは、基本的にこれだけです。

js_dom_classimg.html のソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "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 で設定します。透明度は、ブラウザによってコードが違いますので 3種類記述してあります。透明度は、タグに設定されますので背景画像だけでなく、同じタグ内に記載された文字も半透明になってしまいます。

js_dom_classimg.css のソースコード

@charset "utf-8";
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 のソースコード

//JavaScript DOM class に背景画像を順に割り当てる

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)"');
    }
}

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > JavaScript > class に背景画像