34 lines
1.5 KiB
HTML
34 lines
1.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>Example 6.4 </title>
|
|
<link href="greg.css" rel="stylesheet" type="text/css" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<script>
|
|
function pickAvatar(picked)
|
|
{
|
|
var avatar = document.getElementById(picked).value;
|
|
document.getElementById("myavatar").innerHTML = avatar;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<table width = "80%" align = "center"><tr colspan = "5"><td class="nobdr"> <br /></td></tr>
|
|
<tr><td colspan = "5" class="nobdr"><h1>Select Your Avatar:</h1></td></tr>
|
|
<td class="nobdr"> <img src="images/bunny.jpg" /></td>
|
|
<td class="nobdr"> <img src="images/elf.jpg" /> </td>
|
|
<td class="nobdr"> <img src="images/ghost.jpg" /></td>
|
|
<td class="nobdr"><img src="images/princess.jpg" /></td>
|
|
<td class="nobdr"><img src="images/wizard.jpg" /></td>
|
|
</tr>
|
|
<tr><td class="nobdr"><input type = "radio" name = "avatar" id = "bunny" value = "Bunny" onclick="pickAvatar('bunny')"/></td>
|
|
<td class="nobdr"><input type = "radio" name = "avatar" id = "elf" value = "Elf" onclick="pickAvatar('elf')"/></td>
|
|
<td class="nobdr"><input type = "radio" name = "avatar" id = "ghost" value = "Ghost" onclick="pickAvatar('ghost')"/> </td>
|
|
<td class="nobdr"><input type = "radio" name = "avatar" id = "princess" value = "Princess" onclick="pickAvatar('princess')"/></td>
|
|
<td class="nobdr"><input type = "radio" name = "avatar" id = "wizard" value = "Wizard" onclick="pickAvatar('wizard')"/> </td></tr>
|
|
</table>
|
|
<p>The avatar you selected is: <span id = "myavatar">kitty</span> </p>
|
|
<p> </p>
|
|
</div>
|
|
</body>
|
|
</html> |