スパイス通販・スパイス販売なら。スパイス・ハーブのネット通販専門店 SPICE LUCK-スパイスラック

スパイス・ハーブのネット通販専門店 SPICE LUCK-スパイスラック


【技術メモ】TOPイメージのローテーション表示

2010年4月6日 カテゴリ:,  タグ:

店長です。

以下、サイト制作に関する備忘録ですので、興味のない人はさらっと流して下さい。書いておかないとどうやったか忘れちゃうので・・・備忘録というヤツです。

とてもシンプルで簡単な方法なので、同じようなことやりたいと思っている人は参考にしてもらえれば。

■要件

  • スパイスラックWebサイトのTOPメインイメージを静的一枚画像から、複数自動切り替え表示にしたい。
  • 切替時にクロスフェード効果が欲しい。
  • 画像枚数やフェードの時間、表示時間は自由に設定できるように。

■前提

  • FLASH使えない(技術的に、と言うかソフトがない)。
  • CGI/PHPが上手く動かない(レンタルサーバー的に)。
  • jQuery等を利用した複雑なJavescriptは避けたい(技術がない、時間がない)。

■実装

  • Javascriptで実装。
  • 「bsn.Crossfader.js」を使用。
  • jsファイルはこちらからダウンロード(リンク先消滅)。

■手順

  1. <head></head>内に「bsn.Crossfader.js」へのパスを記述。(例)
    <script src="js/bsn.Crossfader.js" type="text/javascript"></script>
    
  2. ローテーション画像を表示させたい場所に、画像数分のHTMLを表記。各画像を<div></div>でくくり、divに任意かつ一意のidを振る。(例)
    <div id="banner1">
    <a href="mixedspice.html" id="topimg">
    <img src="img/top_img2.jpg" alt="ああ" width="790" height="140" border="0" />
    </a>
    </div>
    <div id="banner2">
    <a href="organic.html" id="topimg">
    <img src="img/top_img.jpg" alt=いい" width="790" height="140" border="0" />
    </a>
    </div>
    
  3. 2のHTML表記より後<body></body>内に、下記の呼び出しJavascriptを記述。(外部jsファイル化してもOK)
    <script type="text/javascript">
    var cf = new Crossfader( new Array('banner1','banner2'), 500, 3600 );
    </script>
    
  4. 呼び出しJavascriptの「(‘banner1′,’banner2’)」には、HTML部分で指定したidを記述。
    「500, 3600」については、「500」がクロスフェードの適用時間、「3600」が一枚あたりの画像表示時間。単位はミリセコンド。
  5. 見た目の整形はCSSで調整。

以上。

余談ですが、これ実装したら、IE7で画像が右側に大胆にはみ出てしまいました。原因は、上記HTML部分に対するCSSを「text-align:center」にしていたから。「text-align:left」にしたら落ち着きました。
該当エリアに対してのcenter指定だから間違ってない筈なんですが・・・多分IE7独自のバグなのでしょう。
本当IE7ってダメなブラウザ・・・

さらに余談。
上記のようにブログ内に直接コードを表記する場合、<pre>タグを使いますが、普通にやっちゃうと、長いコードが自動的に改行されずに右側にどこまでもはみ出てしまいます。
この場合、下記CSSを適用してやると綺麗に改行されて収まりますよ。

pre {
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

それでは、今日だけなんちゃってWebデザイナー的なブログでした。
(あ、ぼくは素人です。念のため)