单选框图片显示

<html>
<style>
</style>
<script>
function showPic(picUrl)
{
document.getElementById("dv").style.backgroundImage = "url("+picUrl+")";
document.getElementById("dv").style.width=140;
document.getElementById("dv").style.height=200;
}
</script>
    <body>
<div id=dv>
</div>
<hr>
<form name=f1 id=f1>
<table border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">
<tbody>
<tr>
<td><input type="radio" value="07" name="webmodel" onclick="showPic('1.jpg')"/>NO.01</td>
</tr>
<tr>
<td bgcolor="#ffffff"><a href="#"><img src="1.jpg" width="140" height="200" border="0" /></a></td>
</tr>
</tbody>
</table></td>
<td><table border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">
<tbody>
<tr>
<td><input type="radio" value="07" name="webmodel"  onclick="showPic('2.jpg')"/>NO.02</td>
</tr>
<tr>
<td bgcolor="#ffffff"><a href="#"><img src="2.jpg" width="140" height="200" border="0" /></a></td>
</tr>
</tbody>
</table></td>
<td><table border="1" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">
<tbody>
<tr>
<td><input type="radio" value="07" name="webmodel"  onclick="showPic('3.jpg')"/>NO.03</td>
</tr>
<tr>
<td bgcolor="#ffffff"><a href="#"><img src="3.jpg" width="140" height="200" border="0" /></a></td>
</tr>
</tbody>
</table>
</form>
    </body>  
</html>

解决方案 »

  1.   

    <div id="d"></div>
    <img id="img1" src="1.jpg" height="50" width="50"><input type="radio" for="img1" onclick="f(this)">
    <img id="img2" src="2.jpg" height="50" width="50"><input type="radio" for="img2" onclick="f(this)">
    <img id="img3" src="3.jpg" height="50" width="50"><input type="radio" for="img3" onclick="f(this)">
    <script>
    o = document.getElementById("d");
    function f(obj)
    {
    o.innerHTML = document.getElementById(obj.getAttribute("for")).outerHTML;
    }
    </script>