I have a webpage sliced into a dynamic table.<br />
<br />
However what I want to do is swap an image in a cell with another image.<br />
<br />
E.G. I have 3 rollover buttons called<br />
<br />
Madonna<br />
Britney<br />
Kylie<br />
<br />
Now when I click on the Madonna button a picture of Madonna will show in a cell called 'face'<br />
<br />
Now if I click Britney I want Madonna's face to disappear and Britney's face to appear in the same 'face' cell. All the face images will be the same size.<br />
<br />
Is this possible to do using images, javascript, and table cells only ?<br />
<br />
Thanks<br />
<br />
Toot<!--content-->Hi there tootsweets,Is this possible to do using images, javascript, and table cells only ?<br />
Yes, and with csss also, try this...<html><br />
<head><br />
<title>Image Viewer</title><br />
<br />
<style type="text/css"><br />
<!--<br />
table<br />
{<br />
position:absolute;<br />
top:50px;<br />
left:300px;<br />
width:360px;<br />
height:200px;<br />
border: solid 2px #000000;<br />
padding:5px;<br />
}<br />
td#one<br />
{ <br />
border: solid 2px #000000;<br />
width:100px;<br />
padding:5px;<br />
}<br />
td#two<br />
{ <br />
border: solid 2px #000000;<br />
}<br />
span<br />
{<br />
font-family:arial;<br />
color:#000000;<br />
font-size:16px;<br />
}<br />
img#imageview<br />
{<br />
width:250px;<br />
height:200px;<br />
}<br />
//--><br />
</style><br />
<br />
<script type="text/javascript"><br />
<!--<br />
function show(path,w,h)<br />
{<br />
document.getElementById('imageview').src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/path;">http://www.htmlforums.com/archive/index.php/path;</a><!-- m --><br />
document.getElementById('imageview').style.width = w + 'px';<br />
document.getElementById('imageview').style.height = h + 'px';<br />
}<br />
//--><br />
</script><br />
<br />
<head><br />
<body><br />
<table ><tr><br />
<td id="one"><br />
<span onclick="show('madonna.jpg',250,200);">Madonna</span><br /><br />
<span onclick="show('britney.jpg',250,200);">Britney</span><br /><br />
<span onclick="show('kylie.jpg',250,200);">Kylie</span></td><br />
<td id="two"><img id="imageview" src=http://www.htmlforums.com/archive/index.php/"clear.jpg" alt=""/></td><br />
</tr></table><br />
</body><br />
</html>You will need to make a clear image that will show before named selection.<br />
<br />
I hope that this helps
<br />
<br />
cthead<!--content-->Thanks for the helpful reply. Just what I'm looking for.<br />
<br />
Much appreciated<br />
<br />
Toot<!--content-->
<br />
However what I want to do is swap an image in a cell with another image.<br />
<br />
E.G. I have 3 rollover buttons called<br />
<br />
Madonna<br />
Britney<br />
Kylie<br />
<br />
Now when I click on the Madonna button a picture of Madonna will show in a cell called 'face'<br />
<br />
Now if I click Britney I want Madonna's face to disappear and Britney's face to appear in the same 'face' cell. All the face images will be the same size.<br />
<br />
Is this possible to do using images, javascript, and table cells only ?<br />
<br />
Thanks<br />
<br />
Toot<!--content-->Hi there tootsweets,Is this possible to do using images, javascript, and table cells only ?<br />
Yes, and with csss also, try this...<html><br />
<head><br />
<title>Image Viewer</title><br />
<br />
<style type="text/css"><br />
<!--<br />
table<br />
{<br />
position:absolute;<br />
top:50px;<br />
left:300px;<br />
width:360px;<br />
height:200px;<br />
border: solid 2px #000000;<br />
padding:5px;<br />
}<br />
td#one<br />
{ <br />
border: solid 2px #000000;<br />
width:100px;<br />
padding:5px;<br />
}<br />
td#two<br />
{ <br />
border: solid 2px #000000;<br />
}<br />
span<br />
{<br />
font-family:arial;<br />
color:#000000;<br />
font-size:16px;<br />
}<br />
img#imageview<br />
{<br />
width:250px;<br />
height:200px;<br />
}<br />
//--><br />
</style><br />
<br />
<script type="text/javascript"><br />
<!--<br />
function show(path,w,h)<br />
{<br />
document.getElementById('imageview').src = <!-- m --><a class="postlink" href="http://www.htmlforums.com/archive/index.php/path;">http://www.htmlforums.com/archive/index.php/path;</a><!-- m --><br />
document.getElementById('imageview').style.width = w + 'px';<br />
document.getElementById('imageview').style.height = h + 'px';<br />
}<br />
//--><br />
</script><br />
<br />
<head><br />
<body><br />
<table ><tr><br />
<td id="one"><br />
<span onclick="show('madonna.jpg',250,200);">Madonna</span><br /><br />
<span onclick="show('britney.jpg',250,200);">Britney</span><br /><br />
<span onclick="show('kylie.jpg',250,200);">Kylie</span></td><br />
<td id="two"><img id="imageview" src=http://www.htmlforums.com/archive/index.php/"clear.jpg" alt=""/></td><br />
</tr></table><br />
</body><br />
</html>You will need to make a clear image that will show before named selection.<br />
<br />
I hope that this helps
<br /><br />
c
thead<!--content-->Thanks for the helpful reply. Just what I'm looking for.<br /><br />
Much appreciated<br />
<br />
Toot<!--content-->