ホーム » ブログ » yasさんのブログ

AJAX/JavaScript で、画像（image）を重ねる方法

AJAX で画面をライブアップデートして、地図の上の画像の位置が逐次変化するようなユースケースを考える。画像（image）を動的に生成して処理するには、
var icon = document.createElement('img');
として、
var icons = document.createElement('div');
の icons コレクションの中に追加すればよい。そして icons オブジェクトは HTML 中に宣言してある
に追加する。 しかしこれをずっと繰り返すと古い画像が地図の上に残ったままになる。そこで update メソッドの最初の方で
for(i = 0; i < icons.childNodes.length; i++) {
    try {
        icons.removeChild(icons.childNodes[i]);
    } catch(e) {
    }
}
という処理を入れて、icons ノードに含まれる個々の icon オブジェクト（image オブジェクト）を削除してあげればよい。 JavaScript を呼び出す HTML は次のようにする（元の地図の大きさ 800x600 を 600x450 に縮小して表示することを考えます）。
<script src="https://yourdomain.com/test.js" type="text/javascript">
</script>

<div style="position: relative;">
<img id="map" src="/images/map.png" alt="ここには背景となる地図を用意してください"
width="600">
<div id="overlays"></div>
</div>
そして以下は、サーバからデータを受け取った後に JavaScript 内で update メソッドを呼んでイメージを更新する部分（ファイル名はとりあえず test.js とかにしておくことにする）。 ※この説明だけではわかりずらいと思うので、どんどん質問してください。
//<![CDATA[

var ICON_SIZE = 20;
var ICON_SRC  = '/your_icon_image.png';
var OBJECT = 'object';
var MAP_ORIGINAL_WIDTH = 800;
var MAP_WITH = 600;

var imgs = document.createElement('div');
var ratio = BACKGROUND_WIDTH / BACKGROUND_ORIGINAL_WIDTH;

function update(xml) {

    if(xml) {

        if(xml.documentElement) {    // for IE

            var objects = xml.documentElement.getElementsByTagName(OBJECT);

            for(i = 0; i < imgs.childNodes.length; i++) {
                try {
                    imgs.removeChild(imgs.childNodes[i]);
                } catch(e) {
                }
            }

            for (var i = 0; i < objects.length; i++) {

                var x = Math.floor(objects[i]
                    .getElementsByTagName('x')
                    .item(0)
                    .firstChild
                    .nodeValue
                    * ratio)
                    - ICON_SIZE / 2;

                var y = Math.floor(objects[i]
                    .getElementsByTagName('y')
                    .item(0)
                    .firstChild
                    .nodeValue
                    * ratio)
                    - ICON_SIZE / 2;

                var icon = document.createElement('img');
                icon.setAttribute('src', IMG_SRC);
                icon.setAttribute('style',
                        'position: absolute; top: ' + y + 'px; left: ' + x + 'px;');
                icons.insertBefore(icon, null);  // add an icon object into icons collection
            } // End of for i

            document.getElementById('overlay').insertBefore(icons, null);
        }
    }
}

...

//]]>
トラックバック URL: https://perltips.twinkle.cc/trackback/161
Posted on 2007-01-06 by yas |