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

<form action="#">
    <p>▼　クリックすると画像が入れ替わります</p>
    <span onclick="fReplaceChild(this)"><img src="/content/img/pengin.gif" alt="ペンギン" /></span>
</form>

<script type="text/javascript">
function fReplaceChild(parentObj){
    /* 新しいIMG要素を生成 */
    var newNode=document.createElement("IMG");
    /* 古いIMG要素を取得 */
    var oldNode=parentObj.firstChild;
    /* 古いIMG要素のsrc属性を取得し、新しいIMG要素のsrc属性を差替 */
    var btnFLG=(oldNode.getAttribute("src").indexOf("_doki")>-1) ? "" : "_doki";
    newNode.setAttribute("src", "/content/img/pengin"+btnFLG+".gif");
    /* 新しいIMG要素に置換 */
    parentObj.replaceChild(newNode, oldNode);
}
</script>