タイマーとの連動
図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 記事を毎朝メールでまとめ読み(登録無料)
特集
CIO
- 顧客志向で切り拓くCOVID-19時代の変革ジャーニー
- ビジネス視点で分かるサイバーのリスクとセキュリティ
- 2025年に向けてDXを推進するIT部門の役割とガバナンス
- “真FinTech” 地域金融の行方
- 教育IT“本格始動”
- 月刊 Windows 10移行の心・技・体
- ITアナリストが知る日本企業の「ITの盲点」
- シェアリングエコノミーの衝撃
- デジタル“失敗学”
- コンサルティング現場のカラクリ
- Rethink Internet：インターネット再考
- インシデントをもたらすヒューマンエラー
- エリック松永のデジタルIQ道場
- 研究現場から見たAI
- Fintechの正体
- 米ZDNet編集長Larryの独り言
- 大木豊成「仕事で使うアップルのトリセツ」
- 山本雅史「ハードから読み解くITトレンド放談」
- 田中克己「展望2020年のIT企業」
- 松岡功「一言もの申す」
- 松岡功「今週の明言」
- 内山悟志「デジタルジャーニーの歩き方」
- 内山悟志「IT部門はどこに向かうのか」
- 林雅之「デジタル未来からの手紙」
- 谷川耕一「エンプラITならこれは知っとけ」
- 内製化とユーザー体験の関係
- 「プロジェクトマネジメント」の解き方
モバイル
セキュリティ
- スマートシティーのセキュリティを考える
- セキュリティインシデント対応の現場
- エンドポイントセキュリティの4つの「基礎」
- 企業セキュリティの歩き方
- サイバーセキュリティ未来考
- ネットワークセキュリティの要諦
スペシャル
- マネージャーを目指すエンジニアのためのビジネスナレッジ
- ローコード技術の衝撃
- デジタル時代を支える顧客接点改革
- エンタープライズAIの隆盛
- インシュアテックで変わる保険業界
- 顧客は勝手に育たない--MAツール導入の心得
- 「ひとり情シス」の本当のところ
- ざっくり解決！SNS担当者お悩み相談室
- 後藤先生の「SNSリスクマネジメント講座」
- 生産性向上に効くビジネスITツール最前線
- ざっくりわかるSNSマーケティング入門
- 庭山一郎「戦略なきIT投資の行く末」
- 課題解決のためのUI/UX
- エンタープライズトレンドの読み方
- 10の事情
- 座談会＠ZDNet
- 吉田行男「より賢く活用するためのOSS最新動向」
- 古賀政純「Dockerがもたらすビジネス変革」
- 中国ビジネス四方山話
- ベトナムでビジネス
- 日本株展望
- 企業決算
- ピックアップソリューション : Identityマスターへの道
