忍者ブログ

GAM-22のメモ

FancyZoom のズームアイコン

2017.10 ← 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 →

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

FancyZoom のズームアイコン

ズームアイコン

FancyZoom で画像が拡大できるときに、虫眼鏡アイコンがあっても面白いかなと思って作ってみました。影に悪戦苦闘しました。どうやらInkscapeでは、単純なグラデショーンや、放射線状の円のグラデーションしか描けないようなので、グラデーションを何枚も重ねて誤魔化しています。持ち手のところは微妙ですが、レンズで下の方向に影が濃くなっているのは違和感なく成功したと思います。

極力FancyZoomのクローズボタンに似せたデザインにしました。

早速、このアイコンを、画像に埋め込むようにプログラムを書き換えたんですが、appendChildの使い方を理解するのが大変でした。このサンプルを見つけてようやく意味がわかりました。(改造したソース)

完成したと思ったんですが、なぜかアイコンが左上に寄ってしまいます。変だなと思ったら、img要素をブロック要素にしてたのがダメだったようです。しかたなくインライン要素に戻したのですが、一部の記事(特に、1/24以前に書いた記事)のレイアウトが崩れるようになってしまいました。どうしたらいいものですかねぇ。

ところで、この記事のカテゴリは「絵と写真」で良いんでしょうか?

追記

  • しかも、今(5月31日)確認したら、IE6では酷いことになってます。仕方ないので、head要素直下にアイコンを作るようにしたら、今度はアイコンをクリックしたときにズームにならないという本末転倒な仕様になりました。

  • 6月1日、というか、インライン要素である、a要素内で、positionを使って配置するのが間違いだった気がしてきました。もっと別な方法を考えないとダメかもしれません。

  • 6月2日、そういえば、カーソルに画像が使えたなぁと思いだしたんですが、curファイル(半透明に透過できない)しか使えないので諦めました。

  • 6月6日、というか画像の座標や構成は、他のJavaScriptでも変化するし、やっぱりマウスを乗せたときにアイコンを再配置する方が楽な気がしてきました。で作ってみたんですが、なんか芸が無さすぎな感がします。

PR
この記事にコメントする
お名前
タイトル
文字色
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字
上手いなぁ。
それくらいの腕があれば、カッコいい時計のsvgを作れそうだね。
hajimeさん / 2008/06/01(Sun) / 編集
お久しぶりです
マジですか!
膨大な時間(30分)を費やした甲斐がありました。ただちょっと、JavaScriptが酷いことになってます。どうしよう・・・
あと、svgでも時計が作れるんですね(初めて知った)! ちょっと面白そうです。

なにかの手違いで、コメントの受信拒否設定に、Ubuntuのページを追加してました(汗)。すみません。移転したと思ったんですが、移転先のブクマし忘れました。教えてくれると嬉しいです。
 (2008/06/01)
IEに負けないで!!

それにしても、IE6のユーザーは多いので、
見捨てるわけに、いかないんですよね~

Firefoxに乗り換えてほしいですね。そういえば、FF3のRC1にバージョンを上げたのですが、とても使いやすいです。ぜひ、どうぞ!

I hate IE.

higurashiさん / 2008/06/01(Sun) / 編集
お久しぶりです
そうなんですよね。知人でもIE6な人がまだ大半ですね。pngが透過されないし(どうにもならない)、CSSもバグだらけでホント困ります。IE7ならまだ許容範囲なんですが・・・

Firefox3 RC1、遂にが登場ですね! ちょっと使ってみようと思います。
I hate IE too.
 (2008/06/01)
svgは時計のパーツです。上手い人ならURL欄にあるようなのが作れるのです。

HPは事情があって閉鎖しちゃいました。
hajimeさんのページhajimeさん / 2008/06/01(Sun) / 編集
これが
svgの時計ですね。ってきり、svgをページに埋め込んで、JavaScriptでリアルタイムに動かすのを想像してしまいました。にしても、この時計、レベルが高い・・・ こんなのを描こうと思っても、いまいち手順が分りませんね。まだまだ技量不足です。

そういえば、FancyZoom が予想外なところで有効になって、おや? と思ってしまいました。ちょっと楽しかったです。
 (2008/06/01)
この記事にトラックバックする
トラックバックURL:
カテゴリー
カウンター
最新記事
最新コメント
Twitter
人気記事
Amazon お買い得情報
Amazon お買い得情報
プロフィール
自画像
HN :
GAM-22
性別:
男性
職業:
大学1年生
HSP暦:
6年
好きなもの :
ゲーム, アニメ, マヨネーズ
嫌いなもの :
運動, 注射, ホラー映画, 英語
好きなバンド :
Muse, Radiohead
その他 :
文章能力が欠如している
バナー
Copyright © GAM-22のメモ All Rights Reserved
Powered by ニンジャブログ Designed by ピンキー・ローン・ピッグ 忍者ブログ / [PR]