JavaScript で（サムネイル）画像を画面の好きな位置に表示する

変数 url は画像の URL です。位置は (100, 50)、サムネイル画像の横幅は 200px です。
画像をクリックすると画像を原寸大で別ウィンドウに表示します。

HTML

<div id="pic"></div>

JavaScript

var nd = document.getElementById("pic");
var url = "http://hoge.jpg"     //画像URL
dispic(nd, url, 100, 50);

function dispic(nd, url, x, y) {
  var a = document.createElement("a"); a.href = url;
  a.setAttribute("target", "_blank")
  nd.appendChild(a);
  var image = document.createElement('img');  //等号の右は new Image(); でもよい
  image.src = url;
  image.width = 200;
  image.style.position = "absolute";
  image.style.left = x + "px";
  image.style.top = y + "px";
  image.setAttribute("src", url);
  a.appendChild(image);
}

画像を好きな位置に表示したいだけなら、

var nd = document.getElementById("pic");
var url ="http://f.st-hatena.com/images/fotolife/o/obelisk2/20140302/20140302095527.jpg";
dispic(nd, url, 100, 750);

function dispic(nd, url, x, y) {
  var image = new Image();
  image.src = url;
  image.width = 200;
  image.style.position = "absolute";
  image.style.left = x + "px";
  image.style.top = y + "px";
  image.setAttribute("src", url);
  nd.appendChild(image);
}

という感じでしょうか。この関数 dispic() で簡単なアニメーションを作ってみると、こんな具合です。

var x = 0; f(x);

function f(x) {
  if (x > 500) return
  var nd = document.getElementById("pic");
  nd.innerHTML = "";
  var url = "http://f.st-hatena.com/images/fotolife/o/obelisk2/20140302/20140302095527.jpg";
  dispic(nd, url, x++, 1000);
  window.setTimeout(f, 5, x);
}