Hi there,
wondered if someone could point me to an appropriate tutorial or offer
advice on the following problem?
I've got a web page which uses lots of divs to position the content of the
page and I'm using a nice javascript to alter the css of a table of links.
The thing is I don't want the table of links to point to an external site
but to calla function which will replace the content of a layer... perhaps
it's be better if I showed you the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<style type="text/css">
.cellButton{width:80px;background-color:#A9A9A9;color:#000000;border:#FFFFFF
1px solid;cursor:pointer;}
.cellButton2{width:80px;background-color:#C8C8C8;color:#000000;border:#FFFFFF
1px solid;cursor:pointer;}
</style>
<script language="Javascript">
function overView(that){that.className = 'cellButton2';}
function outView(that){that.className = 'cellButton';}
</script>
</head>
<body style="background-color:#000000;">
<div
style="position:absolute;left:50%;top:50%;margin-top:-200px;margin-left:-300px;width:150px;height:400px;">
<a href="#">
<img style="width:150px;height:400px;border-style:none;" alt="left"
src="left.gif"/>
</a>
</div>
<div
style="position:absolute;left:50%;top:50%;margin-top:-190px;margin-left:-140px;width:150px;height:400px;">
<img style="width:280px;height:380px;" alt="left" src="blank.gif"/>
</div>
<div style="position:absolute; left: 50%; top: 50%; margin-top: -200px;
margin-left: -150px; width: 300px; height: 400px;">
<img style="width:300px;height:400px;" alt="" src="middle.gif"/>
</div>
<div style="position:absolute; left: 50%; top: 50%; margin-top: -200px;
margin-left: 150px; width: 150px; height: 400px;">
<a href="#">
<img style="width:150px;height:400px;border-style:none;" alt="right"
src="right.gif"/>
</a>
</div>
<div
style="position:absolute;left:50%;top:50%;margin-top:-170px;margin-left:-120px;width:240px;">
<table
style="text-align:center;font-family:monospace;background-color:#C8C8C8;width:240px;"
border="1px" cellspacing="3px" cellpadding="2px">
<tbody>
<tr>
<td class="cellButton" onmouseover="overView(this);"
onmouseout="outView(this);" onclick="location.href='#';">What</td>
<td class="cellButton" onmouseover="overView(this);"
onmouseout="outView(this);" onclick="location.href='#';">Why</td>
<td class="cellButton" onmouseover="overView(this);"
onmouseout="outView(this);" onclick="location.href='#';">When</td>
</tr>
</tbody>
</table>
</div>
<div
style="position:absolute;left:50%;top:50%;margin-top:-130px;margin-left:-250px;width:500px;">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean non risus
in lorem convallis tempor. Ut viverra condimentum arcu. Donec posuere augue
id turpis. Donec lacinia fringilla pede. Maecenas eleifend. Ut mi velit,
mollis ut, luctus eget, condimentum ut, neque. Vivamus sodales pulvinar
magna. Ut dictum mi a risus. Maecenas ultricies erat luctus leo. Quisque
dolor. Nam dolor est, egestas ac, pellentesque eu, interdum sagittis, nulla.
Quisque non eros. Morbi malesuada commodo lacus. Pellentesque odio ante,
dapibus id, consequat nec, accumsan sit amet, lectus.
</p>
<p>
Etiam sit amet leo sed enim suscipit sodales. Donec ipsum. Suspendisse eget
velit eget nunc iaculis dapibus. Fusce libero. Sed eu lectus. In massa leo,
egestas nec, pulvinar tincidunt, cursus feugiat, magna. Praesent sagittis,
wisi eget dignissim tempus, wisi mauris vestibulum velit, quis convallis
velit sapien cursus nisl. Pellentesque blandit urna non neque. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Pellentesque lectus libero, convallis non, eleifend vel, condimentum sed,
felis.
</p>
</div>
</body>
</html>
So what I want to do is dynamically alter or replace the "Lorem ipsum"
paragraphs with some other arbitrary text when the "What", "Why" or "When"
buttons are pressed.
Any ideas or links will be greatly appreciated,
Cheers,
Dom
