[JavaScript] リンクに自動でアイコンを付加する

リンクに自動でアイコンを付加するライブラリを作成した。
丁度よいので、このブログの記事ページに使ってみた。

使い方

ZIPファイルを解凍後、JSファイルとアイコン画像を任意のディレクトリに配置し、本機能を実装したいhtmlでJSファイルを読み込む。

<script type="text/javascript" src="js/addIcon2Links.js"></script>

次に、JSファイルを開き、各設定項目をサイトに合わせて編集する。

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	// アイコン配置ディレクトリ(ルート・絶対・相対パスで指定可能)
	imageDir : './images/',
	// imageDir : '/common/images/',
	// imageDir : 'http://www.sample.com/common/images/',

	// アイコンを付加する拡張子
	extension : [
		// [ '拡張子', 'アイコンとして表示する画像ファイル名', '任意のクラス名' ],
		[ '.pdf', 'ico_pdf.png', 'addIconPdf' ],
		[ '.xls', 'ico_xls.png', 'addIconXls' ],
		[ '.doc', 'ico_doc.png', 'addIconDoc' ],
		[ '.ppt', 'ico_ppt.png', 'addIconPpt' ],
		[ '.zip', 'ico_zip.png', 'addIconZip' ],
		[ '.lzh', 'ico_zip.png', 'addIconZip' ],
		[ '.cab', 'ico_zip.png', 'addIconZip' ],
		[ '.txt', 'ico_txt.png', 'addIconTxt' ]
	],

	// 上記以外でアイコンを付加するリンク(true:付加する/false:付加しない)
	externalFlag : [ true, 'ico_external.png', 'addIconExternal' ], // 外部サイトへのリンク
	mailFlag : [ true, 'ico_mail.png', 'addIconMail' ], // mailto
	httpFlag : [ true, 'ico_http.png', 'addIconHttp' ], // httpへのリンク(httpsページ内のみ有効)
	httpsFlag : [ true, 'ico_https.png', 'addIconHttps' ], // httpsへのリンク(httpページ内のみ有効)
	blankFlag : [ true, 'ico_blank.png', 'addIconBlank' ], // 別ウィンドウ

	// httpのドメイン(httpsとドメインが変わる場合は文字列で設定)
	httpDomain : location.hostname,
	// httpDomain : 'mashimonator.weblike.jp',

	// httpsのドメイン(httpとドメインが変わる場合は文字列で設定)
	httpsDomain : location.hostname,
	// httpsDomain : 'secure104.chicappa.jp',

	// 該当ページのURL(変更不可)
	url : location.href
},

ちなみに、画像リンクの場合はアイコンが付加されないようにしている。

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/102

コメント投稿フォーム