titleスポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- ] スポンサー広告
トラックバック(-) | コメント(-)

titleWebSnaprを導入してみました 

特にネタもないので


WebSnapr(http://www.websnapr.com/)を導入してみました。



WebSnaprとは、リンクがかましてある文字列にマウスを合わせると、行き先のページをサムネイル表示してくれる、という変わったことをしてみたい、という用途以外には使いようのないものなんですが、ものはためしと早速導入してみました。

効果はこんな感じです。各リンク文字列にマウスカーソルを合わせてみてください。先読みするまでしばらく時間がかかるかもしれませんが、しばしお待ちを・・・
体感的にはネスケのほうが早いような気がします。FireFoxではポップアップまではするものの中身の表示はしてくれませんでした。原因はわかりませんのでそのうち直します。



【1/25 22:00 追記】
FLASHのみで作られたサイトはうまく表示されないようです。
表示されるまでに時間のかかるサイトとかからないサイトがありまして、まだ調査中です。



こないだ導入したLightboxも今回導入したWebSnaprにしてもJavascript+CSSでこんなことまでできるのか、と驚かされます。


こんな使い方ができるのなら、もっとまじめにjavascriptを勉強しておくんだった・・・。



で、導入の仕方(FC2ブログ限定)ですが、ともかくWebSnapr(http://www.websnapr.com/)のWebSnapr Preview Bubble v2.0からpreviewbubble.zipをダウンロードして、適当な場所に解凍します。
解凍してできたフォルダの中のpreviewbubble.jsをメモ帳やテキストエディタで開いて、10行目の

 


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


var bubbleImagePath = '/b/bityes/file/bg.png';

半角文字で書き換えます。書き換え方は自分のブログの画像を右クリック→プロパティで確認してください。要するにファイルがアップロードされているところを指定しています。



次に管理者ページに入って、previewbubble.jsbg.pngをアップロードします。

 


次にテンプレートの設定から、現在使っているテンプレートの編集をクリックします。編集画面を上から順に見ていくと</head>という箇所がありますので、その直前の行に以下の記述を半角文字改行はせずに追加します。


<script type="text/javascript" src="<%url>file/previewbubble.js"></script>

更新ボタンをクリックしたら導入は完了です。



あとはWebSnaprを適用したい部分のソースコードに記述を半角文字で追加します。

 



<a target="_blank" href="~" →
 <a class="previewlink" target="_blank" href="~"


<a href="~" → <a class="previewlink" href="~" 




ちょっと面倒ですが、面白い効果が出ると思います。

スポンサーサイト

汳銜 瘠釿 艢驪黽萵璢 闔琺? 令?艢鱚譛邇 轢闊 關 辣竡 轢 艢褓鉤 ?頌跂 矼瘡瑜鱚韲? 提赭? 矼瘡瑜鱚鞐 骼站瑜?鴆? 骼 跋鉗. 包鰰鱶 碼 跪聽鱚 關蔡鈬粫辷鴾? 骼釶髓碵 矼瘡瑜鱚韲? 艢褓 <a href="http://www.zarabotok.rpo.su/index/0-3">?頌 </a> 矼瘡瑜纈韲?
[ 2008/11/16 03:10 ] e8dqewdg[ 編集 ]

コメントの投稿














管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://bityes.blog62.fc2.com/tb.php/268-3d344b5c






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