<style type="text/css">
ul#addLinkIcons li a {
border:0;
text-decoration:none;
}
ul#addLinkIcons li a img {
vertical-align:middle;
}
</style>
<form action="#">
<!-- 通常はwindow.onloadイベントでページが読み込まれたときに実行 -->
<p><input type="button" value="リンク先の拡張子アイコンを表示" onclick="fAddLinkIcons()" /></p>
</form>
<ul id="addLinkIcons">
<li><a href="/content/demo/sample.pdf">PDFファイルへのリンク</a></li>
<li><a href="/content/demo/sample.xml">XMLファイルへのリンク</a></li>
<li><a href="/content/demo/sample.rdf">RSS Feedへのリンク</a></li>
<li><a href="/content/demo/sample.xls">Excelファイルへのリンク</a></li>
<li><a href="/content/demo/sample.jpg">画像ファイルへのリンク</a></li>
<li><a href="/content/demo/sample.zip">圧縮ファイルへのリンク</a></li>
</ul>
<script type="text/javascript">
var done_fAddLinkIcons=false;
function fAddLinkIcons(){
/* UL要素 */
var ulObj=document.getElementById("addLinkIcons");
if(!done_fAddLinkIcons){
done_fAddLinkIcons=true;
}else{
return false;
}
for(var i in ulObj.childNodes){
/* LI要素 */
var liObj=ulObj.childNodes[i];
if(liObj!=null && liObj.nodeName=="LI"){
for(var j in liObj.childNodes){
/* A要素 */
var aObj=liObj.childNodes[j];
if(aObj!=null && aObj.nodeName=="A"){
/* A要素のhref属性取得 */
var aHref=aObj.getAttribute("href");
if(aHref!=""){
/* IMG要素生成 */
var imgObj=document.createElement("IMG");
var fType="";
if(aHref.indexOf(".pdf")>-1){
fType="pdf";
}else if(aHref.indexOf(".xml")>-1){
fType="xml";
}else if(aHref.indexOf(".rdf")>-1){
fType="feed";
}else if(aHref.indexOf(".xls")>-1 || aHref.indexOf(".xlsx")>-1){
fType="xls";
}else if(aHref.indexOf(".jpg")>-1 || aHref.indexOf(".gif")>-1 || aHref.indexOf(".png")>-1){
fType="image";
}else if(aHref.indexOf(".zip")>-1 || aHref.indexOf(".lzh")>-1){
fType="zip";
}
/* IMG要素のsrc属性に拡張子アイコン画像URLを設定 */
imgObj.setAttribute("src","/content/img/icon/file/icon_"+fType+".gif");
/* A要素の子ノードリストの先頭に生成したIMG要素を連結 */
/* 末尾に加える場合は aObj.appendChild(imgObj) */
aObj.insertBefore(imgObj, aObj.firstChild);
}
}
}
}
}
}
</script>