This is just something I quickly put together. It's horribly inefficient, but it's past midnight, it's a Friday night, so blah. ;)
Just copy this and past it into a file and save it as .html, then view in your browser.
<html>
<head>
<title>Page</title>
<script language="javascript">
function toggleOn() {
var panel1 = document.getElementById('panel1')
panel1.style.width='200px'
panel1.style.height='200px'
panel1.innerHTML='Mouse Out'
document.getElementById('panel2').style.display='none'
document.getElementById('panel3').style.display='none'
document.getElementById('panel4').style.display='none'
return false;
}
function toggleOff() {
var panel1 = document.getElementById('panel1')
panel1.style.width='100px'
panel1.style.height='100px'
panel1.innerHTML='Mouse Over'
document.getElementById('panel2').style.display='inline'
document.getElementById('panel3').style.display='inline'
document.getElementById('panel4').style.display='inline'
return false;
}
</script>
<style>
#container{
border:3px solid yellow;
width:250px;
}
#panel1 {float:left;
border:1px solid black;
width:100px;
height:100px;
text-align:center;
padding:5px;
margin:5px;
}
#panel2 { float:right;
border:1px solid blue;
width:100px;
height:100px;
text-align:center;
padding:5px;
margin:5px;
}
#panel3 { float:left;
border:1px solid red;
width:100px;
height:100px;
text-align:center;
padding:5px;
margin:5px;
}
#panel4 { float:right;
border:1px solid green;
width:100px;
height:100px;
text-align:center;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div id="container">
<div id="panel1" onmouseover="toggleOn();" onmouseout="toggleOff();">
Mouse Over
</div>
<div id="panel2">
Panel 2
</div>
<div id="panel3">
Panel 3
</div>
<div id="panel4">
Panel 4
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
