海外のウェブサイトで多く見られる「マルチヘッダー(MultiHeader)」「マルチヒーロー(MultiHero)」を実現するJavaScriptです。ページのキービジュアルやメインイメージに、複数のグラフィックを切り替えながら見せて、スペースをつぶさずにたくさんのコンテンツを配信します。(マルチヒーローについてはこちらの解説記事を参照→ユーザビリティやセンスの良さにグッときた8つのサイトデザイン)
JavaScriptとCSSで構築しているので検索エンジンにインデックス化されやすく、どなたでも簡単にカスタマイズ+導入いただけます。
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="multihero.js"></script>
<script type="text/javascript">
// multihero.js Customize
multihero.interval = 5000;
multihero.speed = "slow";
</script>
※赤字箇所は必須箇所です。適宜パスを変更してお使いください。
<div id="multiHero"> <ul id="multiHeroContents"> <li><a href="#"><img src="images/377289851_72592c7db1.jpg" alt="1"></a></li> <li><a href="#"><img src="images/2314662310_241beacdec.jpg" alt="2"></a></li> <li><a href="#"><img src="images/2314659020_6b315af23b.jpg" alt="3"></a></li> </ul> <ul id="multiHeroControls"> <li><a href="javascript:multihero.show(1);">1</a></li> <li><a href="javascript:multihero.show(2);">2</a></li> <li><a href="javascript:multihero.show(3);">3</a></li> <li class="next"><a href="javascript:multihero.next();">next</a></li> <li class="back"><a href="javascript:multihero.back();">back</a></li> </ul> </div>
<ul id="multiHeroContents>の中のリストタグが切り替えの内容になります。
<ul id="multiHeroControls>が切り替えのコントロールボタン類です。
切り替えの内容は数が増えても問題ありません。
(ただし切り替えの内容の数と、コントロールボタンの数はあわせてください。)
※動作確認ブラウザ: IE6, Fx2/3, Opera9.5, Safari3
※個人利用/商用利用問わずご利用ください。連絡もリンクも特に要りません。
自由に持っていって、自由に改変してください。
どこかで紹介して頂けると嬉しいです。