Memo for a Moment ～ Web2.0を追い求めて～

リンク先ページのスクリーンショットその２

前回のデモがブラウザがFirefoxだとうまくいかいようなので調べてみた。

window.Eventが悪さを、、、

Firefoxでは、window.Eventでは拾えないことが判明、またsrcElement.hrefではなくtarget.hrefにしなくちゃいけないみたい。。。こうゆうのイヤ・・・

でも直してみた、、、

前回のwindow.Event.srcElement.hrefをgetHref()に変更

getHref() ← これでクロスブラウザ対応、やってることはIEかFireFoxでsrcElement.href,target.hrefを返すように。

デモ( FireFox対応版 )

http://mozshot.nemui.org/

http://mozshot.nemui.org/

http://mozshot.nemui.org/

サーバー・ドメイン・メール・ホームページ制作・携帯サイトを業界最安値にて

リンク先ページのスクリーンショット

SimpleAPIやはてなスクリーンショットを利用してURLで指定したホームページ、サイトのスクリーンショットを取得することができる。これとリンクを組み合わせるとサイトが一目瞭然になっておもしろそうなのでやってみた。どれを使おうか迷ったのだけれど今回は MozShotに決定。

スクリーンショットの取り方

とりあえず画像をゲットするだけなら
'http://mozshot.nemui.org/shot?対象ページのURL'
にアクセスすれば128×128のスクリーンショットが得られる。

大きいサイズ( 256×256 )はURLの?の前に/largeを、小さいサイズ( 64×64 )は/smallを入れればよい。その他もっと細かい設定をして取得することもできるようです。

たとえば、、、
http://mozshot.nemui.org/shot?http://goodspade.blog87.fc2.com/

Memo for a Moment

これをリンク文字にマウスが乗ったときにポップアップで表示してみよう。
※ポップアップ表示の仕方はこちら

どうせならイメージリンクにしちゃえば都合が良いので、onMouseOverでアンカータグを作ってそれをoverlibに渡すようにした。

こんな感じ、、、

var source =
'<ａ href=\'' +
window.event.srcElement.href +
'\' target=\'_blank\' onClick=\'nd();\' >' +
'<ｉｍｇ src=\'http://mozshot.nemui.org/shot/large?' +
window.event.srcElement.href +
'\' style=\'border:0;\' alt=\'' +
window.event.srcElement.href + '\' />' +
'<／ａ>';

window.event.srcElement.href ← これが大元のリンク URLなので、それをスクリーショット取得URLに連結、altに設定でＯＫ

デモ

http://www.yahoo.co.jp

http://www.google.co.jp

http://www.youtube.com/

http://www.myspace.com/

http://mixi.jp/

ホームページ制作ＡＳＰ

登録サイト30万突破のA8.net

トラックバック：2

コメント：3

トップへ

overlibmws　ポップアップでテキストを表示

overlibmwsの使い方( デモは次の記事にあります。 )

ポップアップを表示したいタグのonMouseOver,onClickイベントなどで以下の関数を呼び出せばよい。

例. 表示：onMouseOver="return overlib(～);" 非表示：onMouseOut="nd();"

～の部分に[属性名,値],[],...と複数指定して呼び出すことができる。ここで重要なのが属性の種類が多い！ということ、、、以下抜粋→リファレンスです。

CLOSETEXT	閉じるのリンクテキスト、画像も可
CLOSECLICK	指定するとクリックで非表示
CLOSETITLE	リンクのタイトル
MOUSEOFF	STICKEYモード時のNOCLOSE
OFFDELAY	自動非表示までの時間msec
TEXTPADDING	メインのパディング
CAPTIONPADDING	キャプションのパディング
BORDER	ボーダーの太さ
STATUS	ステータスバーに表示するテキスト
AUTOSTATUS	メインをそのままステータスバーに表示
AUTOSTATUSCAP	キャプションを〃
STICKY	貼り付けモード
MODAL	排他制御
WRAP	自動折り返し
WRAPMAX	折り返し幅
RIGHT	カーソルの右に表示
LEFT	カーソルの左に表示
CENTER	カーソルの中央に表示
BELOW	カーソルの下に表示
ABOVE	カーソルの上に表示
OFFSETX,Y	表示位置指定
REF	idで表示位置の要素を指定
FADETIME	フェード効果時間
FADEIN	表示時のフェード効果
FADEOUT	非表示時のフェード効果
FILTER	指定するとフィルター効果
FILTEROPACITY	透過比
SHADOW	指定するとシャドー効果
SHADOWCOLOR	シャドーカラー
DRAGGABLE	指定するとドラッグ可能
CAPTION	キャプションテキスト
CGCLASS	キャプションのCSSでの指定クラス
CGCOLOR	キャプションのカラー
CAPCOLOR	キャプションのテキストカラー
CLOSECOLOR	閉じるのテキストカラー
BGCLASS	ボーダーのCSSでの指定クラス
BGCOLOR	ボーダーカラー
FGCLASS	メインのCSSでの指定クラス
FGCOLOR	メインカラー
TEXTCOLOR	メインのテキストカラー