リンク先のサムネイルを吹き出し風のポップアップに演出「WebSnapr」

姫路発。地域情報、ブログ・Web関連、サッカーなど気ままに更新中

スポンサードリンク

COMMENT

TRACKBACK

2009 / 11	▼	▲
日	1	8	15	22	29
月	2	9	16	23	30
火	3	10	17	24	-
水	4	11	18	25	-
木	5	12	19	26	-
金	6	13	20	27	-
土	7	14	21	28	-

Ads by Google

--'--.--.-- コメント : - トラックバック : -

タグ検索

- カテゴリ：スポンサー広告

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FX Online Japan創業5周年キャンペーン実施中

[参考になりましたらクリックよろしくお願いします。]

あなたも容量1GBでデザイン・カスタマイズ自由なFC2ブログをはじめませんか？開設はこちら>>>

リンク先のサムネイルを吹き出し風のポップアップに演出「WebSnapr」

2006'11.18.Sat

タグ検索

テーマ:カスタマイズ - カテゴリ：[weblog] カスタマイズ

前に紹介したサムネイルを生成してくれる「WebSnapr」。
こちらでは別にjsファイルが配布されており、これを使う事によってリンクのマウスオーバー時にリンク先のサムネイル画像を吹き出し風のポップアップに演出することができます。リンク先のイメージを知ることができ、便利でオシャレですね。

簡単な導入方法を載せておきます。

準備
previewbubble.zipをダウンロード。[解凍ソフトはこちら]
bg.pngをアップロードし、previewbubble.jsを修正する(テキストエディタなどで開き、10行目あたりを修正→保存)

var bubbleImagePath = '※images/bg.png';

修正が終わると次にpreviewbubble.jsをアップロードする。

イメージ[クリックにて拡大]

設置方法
<head>～</head>への記述

リンクの設定(class指定を加える)

<a class="previewlink" href="http://tomytaku.blog14.fc2.com/">T-style.com</a>

上のようにリンクにclass指定「class="previewlink"」を加えます。

これで表示されるはずです。サムネイル表示に少々タイムラグがあるので表示されない方はしばらくしてから更新してみてください。

※注)アップロードした自分のpng、jsファイルパスに変更して下さい。

リンク

WebSnapr2.0

関連記事

あなたのサイトへWebサイトのサムネイルを「WebSnapr」

FX Online Japan創業5周年キャンペーン実施中

スポンサードリンク

トラックバックURL
http://tomytaku.blog14.fc2.com/tb.php/549-f8f4bf53
--[TB：注意点]---------------------------------------------------------------------------------------------------
※記事に関係のないものは即削除、同内容でも有効ではないと管理人が判断した場合、削除させて頂きます。
※迷惑トラックバックが多いので承認制にしています。承認するまでは「管理人の承認待ち」という表示が出ます。