Home > IT Tips > Shadowbox応用：Webページに実装させる


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を適用させたのが、便利だなぁと思いました。

 Comments:2

ハムネコ URL 2008-05-14 (水) 09:42

Shadowboxってすごいんですね！
画像ではよく見たことありましたがページもできるのは初耳です！
早速試してみたいと思います(･∀･)

TomomiX URL 2008-05-15 (木) 23:16

ハムネコさん
こんばんわ。コメントありがとうございます。
実際に試してみてください^^
不明点とかあったらお気軽に聞いてくださいねv-392

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/196-3d7d791e
Listed below are links to weblogs that reference
Shadowbox応用：Webページに実装させる from TRASH

Home > IT Tips > Shadowbox応用：Webページに実装させる

Search
Adsense

Calendar
« 2008/07 »
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