ポップアップ

載写真のポップアップが出来るようにCSSを追記してみたんだけれど、これって見やすいのか見にくいのか微妙なところだなぁ。記述は既存のCSSに追記でOK。あとは記事にタグをうつのだけれど、それほど難しいHTMLは必要なくって、イメージタグにリンクタグを絡めるだけ。あとはページ構成をシンプルにって考えていたのにシンプルだから触れる所が多くて逆にゴテゴテした印象になっちゃったのでアンダーラインと枠線を消しちゃった。で〜日記らしくタイトル右に日付がくるようにしてみますた。

写真はNU茶屋町に飾られたツリー。ちょっと他とは違って未来チック?かっこいいツリーが青色に光っていて〜大阪梅田もすっかりクリスマスムードに染まっていてるです。HEPの前やESTもきれいだったなぁ。ハービスエントは巨大なツリーが建物の中に見える迫力の演出。イルミネーションを見るとあぁ今年ももう終わるのだなぁ〜と季節の早さを感じたり。


追記用CSS
a.pic-enlarge { display: block; float: left; margin: 0 7px 0 0; } a.pic-enlarge img{ position: absolute; } a.pic-enlarge, a.pic-enlarge img{ width: 100px; height: 100px; } a.pic-enlarge:hover { border: 0; cursor: auto; } a.pic-enlarge:hover img { width: auto; height: auto; }


記事記載用HTML
<a href="画像のURL" class="pic-enlarge" title="画像名(画像のタイトル)"><img src="画像のURL" title="画像名(画像のタイトル)" width="100" height="100" /></a>

[PR]
by n9ne2 | 2008-11-25 21:12 | 日記