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