NAT’s Programming Champloo

■[JavaScript] IMGタグを画像のクリックで作るブックマークレット

はてなフォトライフに登録している画像を、自分のWebサイトのHTMLページに貼り付けるのが面倒だったので、クリックした画像を表示するIMGタグ(HTMLコード)を作るブックマークレットを作ってみました。

JavaScript自体はよく使っているけど、ブックマークレットを作るノウハウはあまり持ってなかったので、JAVASCRIPT::BOOKMARKLETの「消す！」のソースや、Bookmarklet - ブックマークレットを作成する際のポイントや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;}};})();

使い方

1. 新しいブックマーク(お気に入り)を作る
2. 上記ブックマーク(お気に入り)のURLに、上記ソースコードを指定する
   • 名前は適当に「Capture img」とかにでもしておく
3. IMGタグを作りたい画像のあるページを表示する
4. 作成したブックマーク(お気に入り)をクリック
5. IMGタグを作りたい画像をクリック
6. クリックした画像を表示するIMGタグ(HTMLコード)が確認ダイアログに入力されて表示される
   • IMGタグの例：<img src="http://d.hatena.ne.jp/images/logo_hatena-new.gif" alt="はてな">
7. 確認ダイアログに入力されているIMGタグをコピーして、好きなところにペースト
8. 確認ダイアログは、OKかキャンセルのどちらかを押して閉じる

ツイートする

Permalink | コメント(0) | トラックバック(0) | 00:16