タイマーとの連動
図1は、ImageLoader Utilityによって2つの画像を表示させた例だ。左の画像は10秒以内に画像の領域にマウスカーソルをかざすと画像を表示し、そうでなくてもページをロードしてから10秒後には画像を表示するようになっている。右の画像は、タイマーとは連動させずに、画像の領域をクリックしたら表示するようになっている。
ちなみに、図1のページをロードした直後は、図2のように「〜 No Image 〜」という画像と外枠を先に表示して画像の領域を明示している。この領域はリスト2とリスト3により設定されたものだ。
図1 タイマーと連動して画像をロード（例）
図2 図1のページをロードした直後
リスト2 画像の表示領域（HTML）
10秒以内にマウスをかざして!
クリックすると表示します
リスト3 リスト2に対するCSS設定
まず、左の画像に対する設定をリスト4に示す。
最初にYAHOO.util.ImageLoader.group()によって画像をグループ化する範囲、連動させるイベントと、何秒後に画像を表示させるかを設定する。次にregisterSrcImage()によって表示位置(HTMLタグのID)と画像のURLと大きさを指定する。これにより、画像本来の大きさでなく、縮小/拡大したものを表示させることができる。最後にaddTrigger()でmouseoverイベントでも画像を表示できるようしている。
リスト4 図1左の画像に対する設定（JavaScript）
右の画像に対しては、リスト5のように設定している。
ページロード後の時間制限を用いない場合は、秒数を0より小さい値にしておく。こうしておくと、画像の領域がクリックされるまでの間はずっとデフォルト画像が表示されたままとなる。
リスト4の設定はに対するものだが、リスト5は
に対する設定であることに注意が必要だ。ここでは画像を領域の背景として設定しているため、表示領域と画像の大きさとが整合しない場合に、画像の一部しか表示されないことなどがあるからだ。
リスト5 図1右の画像に対する設定（JavaScript）
// クリックしたら画像を表示（時間指定なし）
var img2 = new YAHOO.util.ImageLoader.group( 'image-group-example2', 'click', -1 );
// 画像を背景として表示
img2.registerBgImage( 'img-div', '図1右の画像のURL' );
ZDNET Japan 記事を毎朝メールでまとめ読み（登録無料）
関連記事
関連ホワイトペーパー
- 深刻な“DX人材”不足が課題となる日本企業、解決のカギは「ノーコードツール」の活用にあり！
- 注目集まるノーコードツールと、避けて通れないアプリの品質確保やガバナンス構築とは
- ITR調査結果から導くDX浸透・定着化-“9割の国内企業がDX推進中も成果が出ているのはごく一部”
- 京王、日清食品、三菱重工、サイバーエージェント、星野リゾートがローコードツールでDXをどう実践したか
- DX人材育成にあたって知っておきたいノーコードツールの活用--業務改革とともに成功した6社の事例
- ITR調査レポートから紐解く、間違いだらけのDX人材育成--研修だけでは成果にならないその理由は？
- 人気カテゴリ
- 経営
- セキュリティ
- クラウドコンピューティング
- 仮想化
- ビジネスアプリケーション
- モバイル
特集
- 松岡功の「今週の明言」
- さまざまなLinuxディストリビューションの世界
- 松岡功の一言もの申す
- デジタルジャーニーの歩き方
- トランスフォーメーションの破壊者：インテントAI
- 「GIGAスクール構想」で進化する教育現場
- 「働く」を変える、HRテックの今
- トップインタビュー
- 流通テック最前線
- デジタル岡目八目
- PDF Report at ZDNET Japan
- DXで直面するカベを突破せよ
- 中国ビジネス四方山話
- ビジネス視点で分かるサイバーのリスクとセキュリティ
- 技術者視点で見るメインフレームの進化と深化
- 持続可能な地域社会を目指す「地域DX」
- カーボンニュートラル（脱炭素）
- ICT来し方行く末
- Ziddyちゃんの「私を社食に連れてって」
- 対応必須化の波が到来したSBOM動向
- Linuxノウハウ
- 企業セキュリティの歩き方
- サプライチェーン管理高度化のススメ
- CIO・情シス部長が知っておきたい「データクラウド」の基本と構造
- 製造業のサイバーセキュリティ・進化する脅威と対策方法
- 世界のICTが集まるアイルランド
- 新潮流Device as a Serviceの世界
- ラズパイをより身近に
- プロダクトの力でビジネスを推進する
- 「責任あるAI」--AIに倫理感を持たせるには
