Home > 20080510


20080510

Shadowbox応用：Webページに実装させる
Shadowboxはサムネイル画像のオーバーレイ表示だけではなく、動画（YouTube/Flashなど）やWebページも実現可能なのです。そこで、今回はWebページに適用させる手法を紹介したいと思います。

サンプルは以下の通りです。
１．テキストリンクにした場合
Google
<a href="http://www.google.co.jp/" rel="shadowbox" title="Google">Google</a>
赤文字を記述するだけです。新しいブラウザで表示（target="_blank"）がある場合、それを削除して記述してください。

２．画像リンクにした場合
20080510_1.png
<a href="http://www.google.co.jp/" rel="shadowbox" title="Google"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/20080510_1s.png" alt="20080510_1.png" border="0" align="left"/></a><br clear="all" />
同じ要領で、赤文字を記述するだけで実現できます。

このブログでも、いくつかWebページのリンク先をShadowboxで利用していますが、特にヘッダー下にあるメニューバー内の「メール」フォーム先にShadowboxを適用させたのが、便利だなぁと思いました。

Home > 20080510

Search
Adsense

Calendar
« 2008/05 »
S M T W T F S
- - - - 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
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top