OK, here we go, this should be simple enough...
We're going to use a style swapper. Put this in your <head> section...
<script type="text/javascript">
function enlarge(id)
{document.getElementById(id).style.height = '100px';}
function shrink(id)
{document.getElementById(id).style.height = '80px';}
function toggle(id)
{if(document.getElementById(id).style.height == "80px")
{document.getElementById(id).style.height = "100px";}
else{document.getElementById(id).style.height = "80px";}}
</script>
Now what this will do is swap out a height with a new height in your CSS. You can use whatever heights you want, just make sure the large one is right after the enlarge function and the small one is after the shrink function, then it needs to go "small large small" in the toggle function.
Here's an example of the CSS...
#div1, #div2, #div3 {
position:relative;
top:45px;
display:block;
width:577px;
border:1px solid black;
padding:10px;
border-radius: 0 0 10px 10px;
overflow:hidden;
height:80px;
}
#wrapper {
position:relative;
margin:auto;
width:610px;
}
That can go in the <head> or in an external sheet, all you really need to know is all of your div tags need to start at the "shrink" setting from the javasscript. You can name your divs anything you like. Just make sure you use id's for your divs (#) and not classes (.), that won't work with the javascript.
Here's an example of the HTML. This would go in your <body>...
<div id="wrapper">
<p><a onmouseenter="enlarge('div1'); shrink('div2'); shrink('div3');" onmouseout="shrink('div1');">Services</a></p>
<p><a onmouseenter="shrink('div1'); enlarge('div2'); shrink('div3');" onmouseout="shrink('div2');">Products</a></p>
<p><a onmouseenter="shrink('div1'); shrink('div2'); enlarge('div3');" onmouseout="shrink('div3');">Contact Us</a></p>
<div id="div1">
<p>div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1 </p>
<p>div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1
div1 div1 div1 div1 div1 div1 </p>
</div>
<div id="div2">
<p>div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2 </p>
<p>div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2 </p>
<p>div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2
div2 div2 div2 div2 div2
div2 div2 div2 div2 div2 div2 </p>
</div>
<div id="div3">
<p>div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3 </p>
<p>div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3
div3 div3 div3 div3 div3 div3 </p>
</div>
</div>
Right now, all the divs are set to their small setting by the CSS. When you mouse over them, they grow to their large setting because of the onmouseenter="shrink('div1'); shrink('div2'); enlarge('div3');" onmouseout="shrink('div3'); added to the links (Services Proiducts and Contact Us). That onmouseenter can also be added to an <img /> tag and will do the same thing. The important thing to see is that on mouse enter it will enlarge one div and shrink all of the others, this way you don't enlarge a div by moving the mouse onto an image or link and just leave it expanded when you mouse out to another.
That aught to do it, let me know if you have any questions.
