Reflection.jsを使う

Reflection.jsというJavaScriptがある。まるで画像が何かに反射して映っているかのような、iTunesとかiPhotoとかのAppleっぽい、いかにもweb2.0という感じの画像の見せ方をしてくれる。

使い方は簡単で、ヘッダーでスクリプトを読み込んで画像にはclass="reflect"を追加するだけでいい。
つまり、

<script type="text/javascript" src="reflection.js"></script>

としておいて、

<img src="image.jpg">

ならば

<img src="image.jpg" class="reflect">

とするだけでいい。すでにクラスを指定してある場合は

<img src="image.jpg" class="some reflect">

とクラスをスペースで区切って追加すればいい。

手軽で素敵なスクリプトなんだけど、IEだと画像にリンクを張っている場合にリンクが効かなくなるバグがあるらしい。というか、実際にある。困った。

<a href="large.jpg"><img src="small.jpg" class="reflect"></a>

としている場合にリンクが効かなくなるのだ。

で、これを直してみた。
ブログのコメント*1を参考に以下のように変更した。

77c77,81
<                       
---
> 
>                               var a = document.createElement('a');
>                               a.setAttribute('href', p.parentNode.href);
>                               p.parentNode.removeAttribute('href');
> 
88,89c92,94
<                               
<                               d.appendChild(p);
---
> 
>                               a.appendChild(p);
>                               d.appendChild(a);
107c112,118
<                                       
---
> 
>                                       d.style.position = "relative";
>                                       canvas.style.position = "absolute";
>                                       canvas.style.left = "0px";
>                                       canvas.style.top = ( divHeight - reflectionHeight ) + "px";
>
> 

107c112,118以降の変更は上記のバグとは関係ない。HTMLの書き方によって反射した画像が元の画像の下ではなくて横に表示されてしまうことがあったので付け加えたもの。

以下のようにしておけば、元の画像と反射との間に1pxの線が表示される*2。

77c77,81
<                       
---
> 
>                               var a = document.createElement('a');
>                               a.setAttribute('href', p.parentNode.href);
>                               p.parentNode.removeAttribute('href');
> 
88,89c92,96
<                               
<                               d.appendChild(p);
---
> 
>                               p.style.borderBottom = "solid #080808 1px";
> 
>                               a.appendChild(p);
>                               d.appendChild(a);
107c114,120
<                                       
---
> 
>                                       d.style.position = "relative";
>                                       canvas.style.position = "absolute";
>                                       canvas.style.left = "0px";
>                                       canvas.style.top = ( divHeight - reflectionHeight +1 ) + "px";
>                                       p.style.borderBottom = "solid #080808 1px";
> 

追記：今のReflectionのバージョンは1.7で、ここのパッチは1.6用なので1.7には使えません。1.7では上記の問題は解消されているはず（未確認）。あと、ブログのコメントへのリンクが変わっていたので変更しました。なぜか投稿時刻も変更されていました。以前はWordPressではなかったのかな？

*1:http://cow.neondragon.net/index.php/1343-Reflectionjs-16#comment-958:title="David" (Guest) wrote at August 17th 2006, 05:19]とKiyanwang wrote at October 16th 2006, 04:16のこと。どっちも微妙に間違っていると思う。

*2:こういう方法もあるようだ→"Batsi" (Guest) wrote at September 30th 2006, 11:33