クリックした位置に画像を読み込む

[ IE4+, NN4, NN6, Mozilla ]

まずは、サンプルをご覧ください。

あらかじめ利用する画像なりレイヤーの数が限られている場合は、必要な数だけ "visibilty: hedden" な画像（もしくはレイヤー）を用意しておけばよいだけです。しかし、このサンプルの場合は人によってクリックする回数がわからないため、幾つ用意していいかわかりません。

このように、閲覧者の要求に応じてオブジェクトの必要数が変わるようなケースでは、その都度新しいオブジェクトを作ってやる必要があります。今回は、ドキュメント上をクリックする度に、(1)新しいレイヤーを生成し、(2)そこに画像を読み込むという手法をとってみました。

【実行例】

→サンプル ※別窓が開きます

サンプルソース

このサンプルをそのまま使っても意味がないと思います。普通のドキュメントにこんなものを埋め込んでしまうと、どこもクリックできなくなってしまいますので。^^;　ちょっとしたゲーム風ページが作れるかもしれませんね…ということで、参考までに。

なお、Functions for CrossBrowserブロックに記述した関数は、はぎさんのJavaScript Tips集で公開されている『ライブラリ集』より拝借しました。併せてご参考に。（注：若干書き換えています）

<script type="text/javascript">
<!--
// Function(s) for CrossBrowser ----------------------------
MAC = navigator.userAgent.indexOf('Mac')!=-1;
DOM = document.all?(document.getElementById?3:2)
                  :(document.getElementById?4
                  :(document.layers?1:0));
CREATE_No = 0;

function getDivFromName(idName){
  if(DOM>=3)
    return document.getElementById(idName);
  if(DOM==2)
    return document.all(idName);
  if(DOM==1){
    var s = '';
    for(var i=1; i<arguments.length; i++)
      s += 'document.layers.'+arguments[i]+'.';
      return eval(s+'document.layers.'+idName);
    }
    return null;
}
function moveDivTo(div,left,top){
  if(DOM==4) {
    div.style.left=left+'px';
    div.style.top =top+'px';
    return;
  }
  if(DOM==3 || DOM==2){
    div.style.pixelLeft=left;
    div.style.pixelTop =top;
    return;
  }
  if(DOM==1){
    div.moveTo(left,top);
    return;
  }
}
function setDivVisibility(div,visible){
  if(DOM>=2){
    div.style.visibility = (visible)?'inherit':'hidden';
    return;
  }
  if(DOM==1){
    div.visibility = (visible)?'inherit':'hide';
    return;
  }
}
function getPageX(e){
  if(window.opera)
    return e.clientX;
  if(DOM==4)
    return e.clientX+window.scrollX;
  if(DOM==3 || DOM==2)
    return document.body.scrollLeft+window.event.clientX;
  if(DOM==1)
    return e.pageX;
  return 0;
}
function getPageY(e){
  if(window.opera)
    return e.clientY;
  if(DOM==4)
    return e.clientY+window.scrollY;
  if(DOM==3 || DOM==2)
    return document.body.scrollTop+window.event.clientY;
  if(DOM==1)
    return e.pageY;
  return 0;
}
function createLayer(left,top,width,height,parentDiv){
  if(DOM==4){
    var layerID='JS_layer'+CREATE_No; CREATE_No++;
    var pDiv   =parentDiv?parentDiv:document.body;
    var div    =document.createElement('DIV');
    div.id=layerID;
    div.setattribute('style',
      'position:absolute;left:'+left+';top:'+top
      +(width >0?(';width:' +width ):'')
      +(height>0?(';height:'+height):'')
      +';visibility:hidden');
    pDiv.appendChild(div);
    return div;
  }
  if(DOM==3 || DOM==2){
    var adj = MAC?' ':'';
    var layerID = 'JS_layer'+CREATE_No; CREATE_No++;
    var pDiv = parentDiv?parentDiv:document.body;
    pDiv.insertAdjacentHTML('BeforeEnd',
      '<div id="'+layerID
      +'" style="position:absolute;left:'+left+';top:'+top
      +(width >0?(';width:' +width ):';width:1')
      +(height>0?(';height:'+height):'')
      +';visibility:hidden;"><\/div>'+adj);
    return document.all(layerID);
  }
  if(DOM==1){
    var div=parentDiv?(new Layer(width,parentDiv)):(new Layer(width));
    if(width>0 && height>0) div.resizeTo(width,height);
    div.moveTo(left,top);
    return div;
  }
  return null;
}
function loadDivImage(div, fName, width, height){
  if(DOM==4){
    var img = document.createElement('IMG');
    img.src = fName;
    if(width >0) img.setattribute('width', width );
    if(height>0) img.setattribute('height',height);
    div.appendChild(img);
    return;
  }
  var s='<img src='+fName;
  if(width >0) s+=' width=' +width;
  if(height>0) s+=' height='+height;
  s+='>'
  if(DOM==3 || DOM==2){
    div.innerHTML = s;
    return;
  }
  if(DOM==1){
    div.document.open('text/html');
    div.document.write(s);
    div.document.close();
    return;
  }
}
// Main Script ---------------------------------------------
var imgToPut = new Image(); imgToPut.src = "tnt.gif";

function putBomb(e){
  var w = imgToPut.width;
  var h = imgToPut.height;
  var x = getPageX(e)-Math.floor(w/2);
  var y = getPageY(e)-Math.floor(h/2);
  var div = createLayer(x, y, w, h);
  loadDivImage(div, imgToPut.src, w, h);
  setDivVisibility(div, true);
}
if(document.layers) document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = putBomb;
// -->
</script>

【 実行例 】

サンプルソース

【実行例】