JavaScript + Ajax 実践サンプル集

アイコン付きテキストリンク

説明補足説明コード分割コードコメント投稿

このサンプルは、リンクにアイコンを付加してアイコン付きのテキストリンクを表示します。doc, txt, pdf, gif, jpg, mp3などのファイルをリンクさせるときに便利です。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Iconize Textlinks with CSS</title>
<link href="assets/css/iconizeTextlinks/iconize.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h3>Extensions</h3>
	<ul>
		<li><a href="#noname.doc">.doc</a> 
		  - <a href="#noname.rtf">.rtf</a></li>
		<li><a href="#noname.txt">.txt</a></li>
		<li><a href="#noname.pdf">.pdf</a></li>
		<li><a href="#noname.xls">.xls</a></li>
		<li><a href="#noname.xpi">.xpi</a> <small>(Firefox Extension)</small></li>
		<li><a href="#noname.rss">.rss</a> 
		  - <a href="#noname.atom">.atom</a></li>
		<li><a href="#noname.opml">.opml</a></li>
		<li><a href="#noname.vcard">.vcard</a></li>
		<li><a href="#noname.exe">.exe</a></li>
		<li><a href="#noname.dmg">.dmg</a> 
		  - <a href="#noname.app">.app</a></li>
		<li><a href="#noname.pps">.pps</a></li>
		<li><a href="#noname.ical">.ical</a> <small>(changed)</small></li>
		<li><a href="#noname.jpg">.jpg</a> 
		  - <a href="#noname.gif">.gif</a> 
		  - <a href="#noname.png">.png</a> 
		  - <a href="#noname.bmp">.bmp</a> 
		  - <a href="#noname.svg">.svg</a> 
		  - <a href="#noname.eps">.eps</a></li>
		<li><a href="#noname.swf">.swf</a> 
		  - <a href="#noname.fla">.fla</a></li>
		<li><a href="#noname.css">.css</a></li>
		<li><a href="#noname.mp3">.mp3</a> 
		  - <a href="#noname.wav">.wav</a> 
		  - <a href="#noname.ogg">.ogg</a> 
		  - <a href="#noname.wma">.wma</a> 
		  - <a href="#noname.m4a">.m4a</a></li>
		<li><a href="#noname.zip">.zip</a> 
		  - <a href="#noname.rar">.rar</a> 
		  - <a href="#noname.gzip">.gzip</a> 
		  - <a href="#noname.bzip">.bzip</a> 
		  - <a href="#noname.ace">.ace</a></li>
		<li><a href="#noname.ttf">.ttf</a></li>
		<li><a href="#noname.mov">.mov</a> 
		  - <a href="#noname.wmv">.wmv</a> 
		  - <a href="#noname.mp4">.mp4</a> 
		  - <a href="#noname.avi">.avi</a> 
		  - <a href="#noname.mpg">.mpg</a></li>
		<li class="new"><a href="#noname.phps">.phps</a></li>
		<li class="new"><a href="#noname.torrent">.torrent</a></li>
	</ul>
</div>

<div id="schemes">
	
	<h3>e-Mail/Messaging <acronym title="Uniform Resource Identifier" xml:lang="en" lang="en">URI</acronym> schemes</h3>
	<ul>
		<li><a href="mailto:somebody@somedomain.tld">mailto:</a></li>
		<li><a href="callto:USERNAMEHERE">callto:</a></li>
		<li><a href="msnim:USERNAMEHERE">msnim:</a></li>
		<li><a href="xmpp:USERNAMEHERE">xmpp:</a></li>
		<li><a href="aim:USERNAMEHERE">aim:</a></li>
		<li><a href="http://www.icq.com/0123456789">ICQ Link</a></li>
		<li><a href="http://edit.yahoo.com/config/send_webmesg?.target=USERNAMEHERE&.src=pg">YIM! Link</a></li>
		<li><a href="skype:USERNAMEHERE">skype:</a></li>
		<li class="new"><a href="gg:USERNAMEHERE">gg:</a></li>
	</ul>

<hr />

<h3>Funky stuff...</h3>
	<ul>
		<li><a href="http://www.youtube.com/watch?v=3msxMFzWGy4">YouTube Movie</a></li>
		<li><a href="http://www.metacafe.com/watch/385711/asians_are_funny/">Metacafe Movie</a></li>
		<li><a href="http://de.sevenload.com/videos/V6EkFzu/Playstation-2">sevenload Movie</a></li>
	</ul>
	
	<ul>
		<li><a href="http://flickr.com/photos/poolie/363863438/">flickr Picture</a></li>
		<li><a href="http://www.bubbleshare.com/album/4599.e7db25c5af1/451257/overview">BubbleShare Picture</a></li>
		<li><a href="http://beta.zooomr.com/photos/5971@Z01/493650">Zooomr Picture</a></li>
		<li><a href="http://de.sevenload.com/bilder/JUfR8qA/269540868-1c50142ea7-o">sevenload Picture</a></li>
	</ul>
	
</div>

</body>
</html>

CSS部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
iconize.css

/* Iconize 0.5 */

/* websites (pictures and movies) */
a[href *="youtube.com/watch?"], a[href *="sevenload.com/videos/"], a[href *="metacafe.com/watch/"] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_film.gif) no-repeat center right;
}

a[href *="flickr.com/photos/"], a[href *="zooomr.com"], a[href *="imageshack.us"], a[href *="bubbleshare.com"], a[href *="sevenload.com/bilder/"] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_pic.gif) no-repeat center right;
}

/* extensions */

a[href$='.doc'], a[href$='.rtf'] {
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_doc.gif) no-repeat center right;
}

a[href$='.txt'] {
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_txt.gif) no-repeat center right;
}

a[href$='.xls'] {
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_xls.gif) no-repeat center right;
}

a[href$='.rss'], a[href$='.atom'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_feed.gif) no-repeat center right;
}

a[href$='.opml'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_opml.gif) no-repeat center right;
}

a[href$='.phps'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_phps.gif) no-repeat center right;
}

a[href$='.phps'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_phps.gif) no-repeat center right;
}

a[href$='.torrent'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_torrent.gif) no-repeat center right;
}

a[href$='.vcard'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_vcard.gif) no-repeat center right;
}

a[href$='.exe'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_exe.gif) no-repeat center right;
}

a[href$='.dmg'], a[href$='.app'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_dmg.gif) no-repeat center right;
}

a[href$='.pps'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_pps.gif) no-repeat center right;
}

a[href$='.pdf'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_pdf.gif) no-repeat center right;
}

a[href$='.xpi'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_plugin.gif) no-repeat center right;
}

a[href$='.fla'], a[href$='.swf'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_flash.gif) no-repeat center right;
}

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'], a[href$='.bzip'], a[href$='.ace'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_archive.gif) no-repeat center right;
}

a[href$='.ical'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_ical.gif) no-repeat center right;
}

a[href$='.css'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_css.gif) no-repeat center right;
}

a[href$='.ttf'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_ttf.gif) no-repeat center right;
}

a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_pic.gif) no-repeat center right;
}

a[href$='.mov'], a[href$='.wmv'], a[href$='.mp4'], a[href$='.avi'], a[href$='.mpg'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_film.gif) no-repeat center right;
}

a[href$='.mp3'], a[href$='.wav'], a[href$='.ogg'], a[href$='.wma'], a[href$='.m4a'] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_music.gif) no-repeat center right;
}

/* messenger */
a[href ^="aim:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_aim.gif) no-repeat center right;
}

a[href ^="msnim:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_msn.gif) no-repeat center right;
}

a[href ^="xmpp:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_jabber.gif) no-repeat center right;
}

a[href *="icq.com"] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_icq.gif) no-repeat center right;
}

a[href *="edit.yahoo.com/config/send_webmesg?"] { 
	padding: 5px 20px 5px 0;
	background: transparent url(icons/icon_yim.gif) no-repeat center right;
}

a[href ^="callto:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_call.gif) no-repeat center right;
}

a[href ^="skype:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_skype.gif) no-repeat center right;
}

a[href ^="gg:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_gadugadu.gif) no-repeat center right;
}

/* email */
a[href ^="mailto:"] {
	padding: 5px 20px 5px 0;
    background: transparent url(icons/icon_mailto.gif) no-repeat center right;
}

/* use this class to make sure that images won't get iconized */

.imageLink {
	padding-right: 0px !important;
	background: none !important;
}

このサンプルを編集して試してみる!

anchor要素のhref属性に設定されているファイルの拡張子を調べるには、以下のようなスタイルシートを使用します。このサンプルで使用しているアイコンは、ここからダウンロードしてください。

a[href$='.txt'] {
  padding: 5px 20px 5px 0;
  background: transparent url(icons/icon_txt.gif) no-repeat center right;
}

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

アイコン付きテキストリンク