多機能画像ローダー：ImageLoader Utility

タイマーとの連動

　図1は、ImageLoader Utilityによって2つの画像を表示させた例だ。左の画像は10秒以内に画像の領域にマウスカーソルをかざすと画像を表示し、そうでなくてもページをロードしてから10秒後には画像を表示するようになっている。右の画像は、タイマーとは連動させずに、画像の領域をクリックしたら表示するようになっている。

　ちなみに、図1のページをロードした直後は、図2のように「〜 No Image 〜」という画像と外枠を先に表示して画像の領域を明示している。この領域はリスト2とリスト3により設定されたものだ。

図1 タイマーと連動して画像をロード（例）

図2 図1のページをロードした直後

リスト2 画像の表示領域（HTML）

<div id="image-group-example1">
  10秒以内にマウスをかざして!<br />
  <img id="img-tag" src="デフォルトの画像（図2）" />
</div>
<div id="image-group-example2">
  クリックすると表示します
  <div id="img-div"></div>
</div>

リスト3 リスト2に対するCSS設定

<style type="text/css">
  #image-group-example1, #image-group-example2 {
    float   : left;
    padding : 0.5em;
  }
  #img-tag {
    width  : 320px;
    height : 240px;
    border : 1px solid #000000;
  }
  #img-div {
    width  : 240px;
    height : 320px;
    border : 1px solid #000000;
    background-image : url( 'デフォルトの画像（図2）' );
  }
  /* ----- （リスト7） ---*/
</style>

　まず、左の画像に対する設定をリスト4に示す。

　最初にYAHOO.util.ImageLoader.group()によって画像をグループ化する範囲、連動させるイベントと、何秒後に画像を表示させるかを設定する。次にregisterSrcImage()によって表示位置(HTMLタグのID)と画像のURLと大きさを指定する。これにより、画像本来の大きさでなく、縮小/拡大したものを表示させることができる。最後にaddTrigger()でmouseoverイベントでも画像を表示できるようしている。

リスト4 図1左の画像に対する設定（JavaScript）

<script type="text/javascript"><!--
  // ページのロードから10秒後に画像を表示
  var img1 = new YAHOO.util.ImageLoader.group( 'image-group-example1', null, 10 );
  // 画像のURLと大きさを指定
  var img1src = img1.registerSrcImage( 'img-tag', '図1左の画像のURL', 320, 240 );
  // 画像にマウスカーソルをかざしたときも表示
  img1.addTrigger( 'img-tag', 'mouseover' );
  /* ----- （リスト5） ---*/
  /* ----- （リスト8） ---*/
// --></script>

　右の画像に対しては、リスト5のように設定している。

　ページロード後の時間制限を用いない場合は、秒数を0より小さい値にしておく。こうしておくと、画像の領域がクリックされるまでの間はずっとデフォルト画像が表示されたままとなる。

　リスト4の設定は<img>に対するものだが、リスト5は<div>に対する設定であることに注意が必要だ。ここでは画像を領域の背景として設定しているため、表示領域と画像の大きさとが整合しない場合に、画像の一部しか表示されないことなどがあるからだ。

リスト5 図1右の画像に対する設定（JavaScript）

// クリックしたら画像を表示（時間指定なし）
var img2 = new YAHOO.util.ImageLoader.group( 'image-group-example2', 'click', -1 );
// 画像を背景として表示
img2.registerBgImage( 'img-div', '図1右の画像のURL' );