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

<form action="#">
    <p><input type="button" value="画像キャプション表示" onclick="fShowGazoCap()" /></p>
</form>

<ul id="ThmbnailLinks">
    <li><a href="/content/img/pic1.png" title="Krispy Kreme Doughnuts by 有楽町丸井★"><img src="/content/img/pic1-thumb.png" alt="pic1" /></a></li>
    <li><a href="/content/img/pic2.png" title="クマさんケーキ by 新宿ALTA★"><img src="/content/img/pic2-thumb.png" alt="pic2" /></a></li>
    <li><a href="/content/img/pic3.png" title="すごい肉 by 牛兵衛 渋谷店★"><img src="/content/img/pic3-thumb.png" alt="pic3" /></a></li>
</ul>

<script type="text/javascript">
var done_fShowGazoCap=false;
function fShowGazoCap(){
    if(!done_fShowGazoCap){
        done_fShowGazoCap=true;
    }else{
        return false;
    }
    var ulObj=document.getElementById("ThmbnailLinks");
    for(var i in ulObj.childNodes){
        var liObj=ulObj.childNodes[i];
        if(liObj!=null && liObj.nodeName=="LI"){
            for(var j in liObj.childNodes){
                var aObj=liObj.childNodes[j];
                if(aObj!=null && aObj.nodeName=="A"){
                    var aTitle=aObj.title;
                    if(aTitle!=""){
                        var addObj=aObj.appendChild(document.createElement("span"));
                        addObj.innerHTML=aTitle;
                    }
                }
            }
        }
    }
}
</script>