Home > 200804


200804

Reflection Maker：反射画像のジェネレータサイト
Reflection Maker

前の記事では、確かJavaScriptを利用した画像の反射を説明しました。
●Reflection：掲載画像をWeb2.0風に反射させるJavaScript

ただ、これだと表示までの負荷が上がってしまうことや、JavaScriptを無効にしているパソコン環境だと表示できない問題もあります。そこで、便利なジェネレータサイトを紹介。

上記サイトにアクセスし、画像をアップロード（Web画像でもローカル画像でも可能）したら、反射度合いを設定。最後に背景色を設定したら「generate」ボタンをクリックするだけ。

しばらく待つと綺麗な反射画像が生成されます。
自分でやってみたサンプルは以下の通り。
20080420_1.jpg20080420_2.jpg

ハンバーガー攻略＠川崎ZATS BURGER CAFE
今日は川崎のラゾーナへ行くことになり、色々買い物や巡回をしてきました。メインの目的は、嫁のマタニティ関連の服を見たり、今後の子供に必要なものなどを見てきました。（といっても後半年くらいはかかる見込みですが）
それにしても、ラゾーナの食堂はデカいですね。久々にハンバーガー食べました。「ZATS BURGER CAFE」という名の佐世保バーガーです。国産ハンバーガー発祥の地が佐世保だからでしたっけ？パティもジューシーで中のチーズもボリュームあってうまかったです

佐世保バーガー：ZATS BURGER CAFE

帰りは当然、ビックカメラで家電コーナーを徘徊しました

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

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

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

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

記述させるものは、通常のHighslide JSを実装させるタグ（青文字部分）に以下の赤文字部分を付け加えます。
<a href="http://blog31.fc2.com/b/blackcat13numbers/file/20080203_1.jpg"  id="title" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="http://blog31.fc2.com/b/blackcat13numbers/file/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 > 200804

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