PHP & JavaScript Room :: 設置サンプル

実行結果

ソース

<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>

polarized women