Forum Moderators: open
[msnbc.msn.com...]
in the middle of the page there's a table called "Newsweek Interactive" where if you click the individual cells the text at the bottom of the table changes.
How do they do that?
It's not a simple image swap, because the text that's changing isn't an image.
I wouldn't think they're showing/hiding/repositioning DIVs, because the table actually grows and shrinks depending on what text is in it. Or maybe they are -- my knowledge of this is limited; if this is how they're doing it, I wouldn't have the first clue as to exactly how.
So how are they doing this? I tried to find the code in their source but couldn't. I also wrote to their webmaster but I doubt I'll hear back.
Here is an example of innerHTML...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Inner HTML</title>
<style type="text/css">
/*<![CDATA[*/
body{ background-color:#aaaaff; }
#dvone{ position:absolute;top:5%; left:2%; }
#dvtwo{ position:absolute; top:5%; left:25%; }
button{ width:100px; border: solid 2px #000000; margin:2px; }
#tbltone{ border: solid 1px #000000; background-color:#ffffff; }
#information{ width:200px; height:200px; border: solid 1px #000000; text-align:center; }
#dvthree{ width:200px; height:200px; padding:10px; overflow:auto; }
/*]]>*/
</style><script type="text/javascript">
//<![CDATA[
function clearcell()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'This cell opens onload.<br /> If required you can leave this blank .'+
' As you will see scrollbars will appear automatically.</div>';
}
function first_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'+
' Praesent blandit venenatis purus. Integer massa libero,'+
' vehicula id, consequat sed, tincidunt nec, purus.'+
' Class aptent taciti sociosqu ad litora torquent per conubia nostra,'+
' per inceptos hymenaeos. Suspendisse potenti.'+
' <br /><a href="#"onclick="javascript:clearcell()">close</a></div>';
}
function second_text()
{
document.getElementById("information").innerHTML ='<div id="dvthree">'+
'Here is some more text.<br />'+
'<a href="#"onclick="javascript:clearcell()">close</a></div>';
}
function third_text()
{
document.getElementById("information").innerHTML =
'<div id="dvthree">'+
'You can also use images.<br />This is an image<br />'+
'<img src="an_image.jpg"alt=""/><br />'+
'<a href="#"onclick="javascript:clearcell()">close</a></div>';
}
//]]>
</script>
</head><body onload="clearcell();">
<div id="dvone">
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="first_text()"> Lorem </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="second_text()" > More text </button><br />
<button onmouseover="this.style.backgroundColor='#ffffff'"
onmouseout="this.style.backgroundColor='#cccccc'"
onclick="third_text()" > An image </button>
</div><div id="dvtwo">
<table id="tbltone"><tr>
<td id="information"></td>
</tr></table>
</div></body>
</html>
birdbrain
FYI: my own personal method goes something like
<script language="javascript">
function swapText(layerName,text) {
document.getElementById(layerName).innerHTML=text;
}
function changeDimensions(layerName,width,height) {
layer=document.getElementById(layerName);
layer.style.width=width+"px";
layer.style.height=height+"px";
}
</script>
<!-- This only works well if short text strings. Otherwise, birdbrains method is best. -->
<a href='javascript:void(0);' onMouseOver='swapText("textLayer","Text");' onMouseOut='swapText("textLayer","");'>
Link
</a>
<div id='textLayer'>
</div>
<!-- I just want to give some options. And capitalize the M and O's. -->
<!-- Yep, I'm a table hater. -->
<!-- This is actually incredibly usefull for tree menu's. First, you make a layer with a + in a box. Then, onClick, replace the + with a - and show the content.... Good for multiple style-sheets when you're never sure what color the +/- should be. -->
