FancyZoom で画像が拡大できるときに、虫眼鏡アイコンがあっても面白いかなと思って作ってみました。影に悪戦苦闘しました。どうやらInkscapeでは、単純なグラデショーンや、放射線状の円のグラデーションしか描けないようなので、グラデーションを何枚も重ねて誤魔化しています。持ち手のところは微妙ですが、レンズで下の方向に影が濃くなっているのは違和感なく成功したと思います。
極力FancyZoomのクローズボタンに似せたデザインにしました。
早速、このアイコンを、画像に埋め込むようにプログラムを書き換えたんですが、appendChildの使い方を理解するのが大変でした。このサンプルを見つけてようやく意味がわかりました。(改造したソース)
完成したと思ったんですが、なぜかアイコンが左上に寄ってしまいます。変だなと思ったら、img要素をブロック要素にしてたのがダメだったようです。しかたなくインライン要素に戻したのですが、一部の記事(特に、1/24以前に書いた記事)のレイアウトが崩れるようになってしまいました。どうしたらいいものですかねぇ。
ところで、この記事のカテゴリは「絵と写真」で良いんでしょうか?
しかも、今(5月31日)確認したら、IE6では酷いことになってます。仕方ないので、head要素直下にアイコンを作るようにしたら、今度はアイコンをクリックしたときにズームにならないという本末転倒な仕様になりました。
6月1日、というか、インライン要素である、a要素内で、positionを使って配置するのが間違いだった気がしてきました。もっと別な方法を考えないとダメかもしれません。
6月2日、そういえば、カーソルに画像が使えたなぁと思いだしたんですが、curファイル(半透明に透過できない)しか使えないので諦めました。
6月6日、というか画像の座標や構成は、他のJavaScriptでも変化するし、やっぱりマウスを乗せたときにアイコンを再配置する方が楽な気がしてきました。で作ってみたんですが、なんか芸が無さすぎな感がします。
hajimeさん
