多機能画像ローダー：ImageLoader Utility - (page 3)

2007-10-12 19:47

画像のグループ化

　画像をグループ化しておくと、そのグループに属する画像に対して同時に処理を行うことが可能になる。ここでは、2つの画像のどちらかにマウスカーソルをかざすと両方の画像が表示される例を示す。

　マウスカーソルをかざす前後の画面を図3、図4に示す。画像の領域はリスト6とリスト7で設定している。

　注目すべきはリスト7の「!important」だ。本来CSSの設定はHTML内のstyle属性のものが優先されるが、これはその優先順位を逆転させるものだ。そのため、style属性に背景画像が設定されているのも関わらず、図3では画像が表示されていない。

図3 マウスカーソルをかざす前

図4 マウスカーソルをかざした後

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


  どちらかにマウスをかざして!
  ひだり
  みぎ

リスト7 リスト6に対するCSS設定

#image-group-example3 div {
  width  : 240px;
  height : 320px;
  border : 1px solid #000000;
  margin : 0.5em;
  float  : left;
  color  : #DDDDDD;
  font-weight : bold;
  font-size   : 30pt;
}
.none-class {
  background : none !important;  /* style属性よりもこちらを優先 */
}

　その画像を表示させるには、リスト8のような設定が必要だ。グループ化は、画像を表示させるタグよりも上の階層にあたるタグに対して設定する。リスト6では

がそれにあたる。

　同じ効果を期待する領域に対しては、HTMLのclass属性で同じの値を指定しておき、その値をclassNameプロパティにも指定しておくことが、この設定でのポイントだ。

リスト8 画像表示の設定（JavaScript）

// このグループの画像にマウスカーソルをかざしたら
// それに属する画像をすべて表示する（時間制限なし）
var img3 = new YAHOO.util.ImageLoader.group( 'image-group-example3', 'mouseover', -1 );
// 表示の際はstyle属性の内容を画面に反映する
img3.className = 'none-class';

　このほか、ウィンドウのサイズ変更や画面のスクロールに連動させることもできるので、オンラインデモを参考に、さまざまなテクニックを研究していただきたい。

　次回はアプリケーションをテストするテストケースをYUI Test Utilityを取り上げる。アドインなしでJavaScriptのアプリケーションのテストができるのは、さまざまなWebブラウザに対応する必要がある場合に便利だろう。

ZDNET Japan 記事を毎朝メールでまとめ読み（登録無料）

メールマガジン登録のお申し込み

「特集：強力AjaxライブラリYahoo! UI Library」バックナンバー

関連キーワード: Yahoo; 開発

多機能画像ローダー：ImageLoader Utility - (page 3)

画像のグループ化

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

リスト7 リスト6に対するCSS設定

リスト8 画像表示の設定（JavaScript）

「特集：強力AjaxライブラリYahoo! UI Library」バックナンバー

関連記事

関連ホワイトペーパー

特集

CNET Japan Top Story

ホワイトペーパー

新着

ランキング

ZDNET Japan クイックポール

NEWSLETTERS

画像のグループ化

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

リスト7 リスト6に対するCSS設定

リスト8 画像表示の設定（JavaScript）

「特集 ： 強力AjaxライブラリYahoo! UI Library」 バックナンバー

関連記事

関連ホワイトペーパー

特集

CNET Japan Top Story

ホワイトペーパー

新着

ランキング

ZDNET Japan クイックポール

NEWSLETTERS

「特集：強力AjaxライブラリYahoo! UI Library」バックナンバー