大量の同じ画像の表示 - 素人がプログラミングを勉強していたブログ

もっと高速にする方法。
background-repeat and clientX

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>background-repeat and clientX</title>
<style type="text/css">
#star{
  width: 0;
  height:10px;
  background:url('http://s.hatena.ne.jp/images/star.gif');
  background-repeat: repeat-x;
}
</style>
<script type="text/javascript">
var star = new Image();
star.src = "http://s.hatena.ne.jp/images/star.gif"; // preload
window.onload = function () {
  var button = document.getElementById("button");
  var stars = document.getElementById("star");
  var view = document.getElementById("view");
  button.onclick = function () {
    stars.style.width = star.width * 10000 + "px";
  };
  stars.onclick = function (e) {
    view.innerHTML = Math.floor(e.clientX / star.width) + "個目の☆をクリックしました";
  };
};
</script>
</head><body>
<input type="button" value="Star!" id="button"></input><span id="view"></span>
<div id="star"></div>
</body></html>

一つのdiv要素のbackground-imageとして☆を表示する。background-repeatをrepeat-xに設定し、あたかも複数の画像を貼り付けたかのように見せる。