Home > 20080421


20080421

Highslide JS応用：画像にタイトルを付加する
以下の記事で実装方法やサンプルを掲載しました。
●Highslide JS実装手順

今回は、このHighslide JSを使った応用として、拡大された画像の下にタイトルを付ける手法を紹介したいと思います。

通常だと以下の通りです。
20071230_04.jpg

これにタイトルを加えると、以下の通りです。
20071230_04.jpg
Vista壁紙です

記述させるものは、通常のHighslide JSを実装させるタグ（青文字部分）に以下の赤文字部分を付け加えます。
<a href="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080203_1.jpg"  id="title" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="http://blog-imgs-29.fc2.com/b/l/a/blackcat13numbers/20080203_1s.jpg" alt="20080203_1.jpg" border="0" /></a><br clear="all" /><div class="highslide-caption" id="caption-for-title">Vista壁紙です</div>
※勿論、赤文字内の「id="○○"」は紐付けてください。
○id="title"
○id="caption-for-title"
上記の部分です。

これで、タイトルも一緒にオーバーレイで表示されているかと思います。ちなみに、追加した最後の <div>〜</div> は、画像タグの最初に入れても動作するようです。

ひとつのページに複数タイトルを入れたい場合は、赤文字内の「id="○○"」を複数作成して紐付ければ実装できますので、是非試してみてください。

Home > 20080421

Search
Adsense

Calendar
« 2008/04 »
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 - - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top