今年2010年も残すところ5日とちょっとですが、そんなクリスマスにGoogleがまた新しいDoodle (Googleトップページのロゴ画像) を出しました。
小さな画像がたくさん並べられていて、それぞれの写真は一部だけが切り取られてる。マウスを乗せるとフレームが大きくなって写真の全貌が見えるというもの。
なんとなくありきたりな手法な気もするけれど、使い方次第では面白い企画に使えそうで、ちょっと興味が湧きました。
気になるなら作ってみよー
興味があるなら、作ってみればいいじゃない。 ということで思いつきで簡単に使えるライブラリを作ってみました。
こんな感じです
サンプルが超手抜きなのはご愛嬌。
ライブラリのダウンロードはこちら
- tiledimagemagnifier.js (右クリックで保存してください)
このライブラリはPrototype.jsフレームワークなどを利用しています。
- Prototype.js (1.6.1で動作確認)
- Script.aculo.us (1.8.3で動作確認)
使い方
スクリプトを読み込み
<!-- フレームワーク --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script> <!-- TiledImageMagnifier --> <script type="text/javascript" src="tiledimagemagnifier.js"></script>
フレームワークはGoogle Libraries APIから読み込んでいますが、別途ダウンロードして設置したファイルを読み込んでも問題ありません。
HTML
<p id="tile"> <a href="sample1.jpg"><img src="image1.jpg" /></a> <a href="sample2.jpg"><img src="image2.jpg" /></a> <a href="sample3.jpg"><img src="image3.jpg" /></a> <a href="sample4.jpg"><img src="image4.jpg" /></a> </p>
HTMLはこのようなシンプルなマークアップで完結します。
<img />
には拡大時の画像をセットしてください。width
, height
は未指定か、あるいは画像の実寸を指定してください。
スタイル
<style type="text/css"> p#container { position: relative; width: 600px; height: 400px; } p#container a { display: block; position: absolute; border: solid 1px gray; } </style>
TiledImageMagnifierを適用
<script type="text/javascript"> // ページのロード完了時に実行 Event.observe( window, 'load', function(){ // TiledImageMagnifierを適用 TiledImageMagnifier( 'container', [ // [通常時の画像座標X, Y, 通常時の画像幅, 高さ, 通常時の画像オフセットX, Y (, 拡大時の画像幅, 高さ)] [ 0, 40, 160, 120, 50, 30 ], // 1個目の要素 [ 170, 0, 120, 160, 70, 0 ], // 2個目 [ 40, 170, 120, 160, 20, 70 ], // 3個目 [ 170, 170, 160, 120, 50, 20 ] // 4個目 ]); }); </script>
第1引数'container'
の部分は、コンテナのID(またはHTML要素オブジェクト)を指定してください。
第2引数の配列は、画像の座標・サイズの配列を指定します。要素の順番はHTML上の順番と一致しています。
ご自由にお使いください
使いたい方はどうぞどうぞー
バグ修正
201012/25: IE, Firefoxでのバグを修正しました。
No comments:
Post a Comment