IMGタグを画像のクリックで作るブックマークレット
はてなフォトライフに登録している画像を、自分のWebサイトのHTMLページに貼り付けるのが面倒だったので、クリックした画像を表示するIMGタグ(HTMLコード)を作るブックマークレットを作ってみました。
JavaScript自体はよく使っているけど、ブックマークレットを作るノウハウはあまり持ってなかったので、JAVASCRIPT::BOOKMARKLETの「消す！」のソースや、http://www.teria.com/~koseki/memo/bookmarklets/tips.htmlやBookmarkletの情報を参考にさせてもらいました。
はてなだとうまくブックマークレットをリンクにできないみたいなので、直接ソースコードを書いておきます。
javascript:(function(){var b=new Array();var c=1;e=document.getElementsByTagName('img');for(i=0;i<e.length;i++){e[i].title='click to capture '+e[i].alt;e[i].onclick=function(){t=this;var x='<img src="'+t.src+'" alt="'+t.alt+'">';prompt('',x);};e[i].onmouseover=function(){if(!c)return;c=0;t=this;b[t]=t.style.backgroundColor;t.style.background='#DADADA';};e[i].onmouseout=function(){t=this;t.style.backgroundColor=b[t];c=1;}};})();
使い方
- 新しいブックマーク(お気に入り)を作る
- 上記ブックマーク(お気に入り)のURLに、上記ソースコードを指定する
- 名前は適当に「Capture img」とかにでもしておく
- IMGタグを作りたい画像のあるページを表示する
- 作成したブックマーク(お気に入り)をクリック
- IMGタグを作りたい画像をクリック
- クリックした画像を表示するIMGタグ(HTMLコード)が確認ダイアログに入力されて表示される
- IMGタグの例：<img src="http://d.hatena.ne.jp/images/logo_hatena-new.gif" alt="はてな">
- IMGタグの例：<img src="http://d.hatena.ne.jp/images/logo_hatena-new.gif" alt="はてな">
- 確認ダイアログに入力されているIMGタグをコピーして、好きなところにペースト
- 確認ダイアログは、OKかキャンセルのどちらかを押して閉じる
