スタイルシートやレイヤーを操作する

クロスブラウザスクリプトの作成テクニック第6回

2007/01/24 00:00

ポスト

クリックした位置へスタイルシート(レイヤー)を移動する

　さて次は、今まで数回に渡って解説してきた「ブラウザの種類やバージョンを判断し、それに合わせて最適化したスクリプトを実行する方法」の総まとめとして、ユーザーがマウスボタンを押した時、その位置へスタイルシートやレイヤーを移動するスクリプトを見ていきましょう。

　第1回で解説した通り、IEとNNではイベントの取り扱いに違いがありました。今回は、その時に解説した方法を利用して、マウスボタンが押されたイベントが発生した位置へ、レイヤーあるいはスタイルシートを移動するようにしています。また、移動するスタイルシートあるいはレイヤーは、今回解説した方法でNN 4.Xではレイヤーを、それ以外のブラウザではスタイルシートを表示しています。

　それでは、サンプルを見ていきましょう。

sample_4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<script type="text/javascript">
<!--
var UA=navigator.userAgent;
function eve(e) {
    if (UA.indexOf("MSIE") != -1 || UA.indexOf("Opera") != -1){
        document.all("STY").style.left=window.event.offsetX;
        document.all("STY").style.top=window.event.offsetY;
    }
    if (UA.indexOf("MSIE") == -1){
        if (UA.indexOf("Mozilla/4") != -1){
            document.layers["LAY"].left=e.pageX;
            document.layers["LAY"].top=e.pageY;
        }
        else{
            document.getElementById("STY").style.left=e.pageX;
            document.getElementById("STY").style.top=e.pageY;
        }
    }
}
document.onmousedown = eve;
//-->
</script>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*クリックした位置へスタイルシート(レイヤー)を移動する
<script type="text/javascript">
<!--
if (UA.indexOf("MSIE") == -1 && UA.indexOf("Mozilla/4") != -1){
    document.write("<layer name='LAY' width='250px' height='100px'"
                   + " left='50px' top='50px' bgcolor='Tan'>");
    document.write("レイヤー...");
    document.write("</layer>");
}
else{
    document.write("<div id='STY' name='STY' style='position:absolute;"
                   + " width:250px; height:100px; left:50px;"
                   + " top:50px; background:Tan'>");
    document.write("スタイルシート...");
    document.write("</div>");
}
//-->
</script>
</body></html>

サンプルファイル「sample4.html」を試す

sample4の実行例（Firefox 2.0）……クリック位置へスタイルシート（レイヤー）が移動します

　サンプルでは、一番始めに始めに8行目で、ユーザーエージェントの値をグローバル変数UAに代入しています。以降は、ユーザーエージェントの値は変数UAから参照していきます。

　次に、NN 4.X用にレイヤーを、それ以外のブラウザ用にスタイルシートを書き出す処理です。この処理はbody要素内の38～47行目となります。ここのブラウザを判断しレイヤーかスタイルシートを表示する処理は、前述の内容と同じです。このサンプルでは、幅250ピクセル、高さ100ピクセルのレイヤー、あるいはスタイルシートを、ブラウザの表示領域左端から50ピクセル、上から50ピクセルの位置に表示しています。

　さて次が、マウスをクリックした時に、クリックした位置をレイヤーやスタイルシートに設定して、それらをその位置へ移動する処理です。

　サンプルでは、25行目で「document.onmousedown = eve」として、マウスボタンが押された時をイベントとしてとらえ、9～24行目に設定した、スタイルシートやレイヤーを移動する関数eveを実行しています。イベントの取得方法や、IEとNNでのイベントから値を取り出す時の方法の違いについては、第1回で詳しく解説していますので、そちらを参照ください。サンプルの場合、イベント発生時のブラウザのコンテンツ表示領域のX軸上、Y軸上の位置は、IE、NNそれぞれで、次の用法で取得できます。

IE：イベントが発生したX座標

window.event.offsetX

IE：イベントが発生したY座標

window.event.offsetY

NN：イベントが発生したX座標

e.pageX

NN：イベントが発生したY座標

e.pageY

　後はこの値を、ブラウザを判断した後、それぞれのブラウザ用に用意したスクリプトの中で、スタイルシートやレイヤーの位置に設定すれば良いのです。

　今回のサンプルでも、判断するブラウザはIEとOpera、NN 4.X、それ以外のMozilla、Firefox、Safariを含めたNN系ブラウザの3種類です。

　IEとOperaの処理は10～13行目で、NN系ブラウザの処理は14～23行目で行っています。

10～13行目

if (UA.indexOf("MSIE") != -1 || UA.indexOf("Opera") != -1){
    document.all("STY").style.left=window.event.offsetX;
    document.all("STY").style.top=window.event.offsetY;
}

14～23行目

if (UA.indexOf("MSIE") == -1){
    if (UA.indexOf("Mozilla/4") != -1){
        document.layers["LAY"].left=e.pageX;
        document.layers["LAY"].top=e.pageY;
    }
    else{
        document.getElementById("STY").style.left=e.pageX;
        document.getElementById("STY").style.top=e.pageY;
    }
}

　NN系ブラウザの処理では、15行目のif文でNN 4.Xかどうかを判断し、処理を振り分けています。

　これにより、マウスボタンが押された時、その位置へスタイルシートやレイヤーの左上角が移動します。

まとめ

　今まで数回に渡り、クロスブラウザスクリプトの手法の一つとして、ブラウザの種類やバージョンを判断し、それに合わせたスクリプトを実行する方法を、実例を挙げながら解説してきました。今まで解説してきた手法は、特定のブラウザに対し、ピンポイントでそのブラウザに最適化したスクリプトを実行できる、といった利点があります。しかしながら、今回解説したIE 7やOpera 9のように、常に新しいブラウザの動向を確認し対応していく必要があります。

　さて、ブラウザの種類やバージョンを判断する方法に関しては、今回で一端終了したいと思います。次回からは、今回までとは違った手法でクロスブラウザスクリプトを実現する方法を解説していきます。

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

クロスブラウザスクリプトの作成テクニック連載記事一覧: ブラウザごとのwindowオブジェクトの違いを理解する

ブラウザごとのeventオブジェクトの違いを理解する

ブラウザがサポートしているスクリプトを判断する 2

もっと読む

この記事の著者: 半場方人（ハンバマサヒト）

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座　JavaScript＆Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事