How do I get a hover to appear in a particular div?

[drums]

I want to use hover like I've seen on some sites where the hover fills a separate area of the page with an image or text.
I have a 2 column body area of a page for FAQ's (All CSS, no tables. I would like to hover over the left side text (the questions) and have the right side populate with the answer in text or image.
I know how to do the hover for images and imagine that you could call a text file that way too (I haven't tried it yet and I could make the text file an image if that doesn't fly) but the tricky part is locating it. Column 1 in css has a width and padding and column 2 is displaced to the right of column 1. So how do I tell the hover to display in column 2?

Thanks a bunch!

[dtm32236]

you want to make divs visible/hidden onmouseover.

check out this link:
http://blog.movalog.com/a/javascript-toggle-visibility/

of course, just change onclick to onmouseover and it should work.... then swap in your info.

this is created differently than the above link, but i have something very similiar on my page if you want to check it out:
http://www.foremostgroups.com/dev/2007corporate/manufacturing/index.asp

the HTML:
<div id="container">
<div id="text0" class="text">this is the initial div seen</div>
<div id="text1" class="text">div2</div>
<div id="text2" class="text">div3</div>
<div id="text3" class="text">div4</div>
<div id="text4" class="text">div5</div>
</div>

and an example link:
<a href="#" alt="" onMouseOver="togLayer('text4'); return false" onMouseOut="togLayer('text0'); return false">

this would toggle div5


the script I used:
<script type="text/javascript">
var currLayerId = "text0";
function togLayer(id)
{
if(currLayerId) setDisplay(currLayerId, "none");
if(id)setDisplay(id, "block");
currLayerId = id;
}
function setDisplay(id,value)
{
var elm = document.getElementById(id);
elm.style.display = value;
}
</script>


and the CSS:
#text0 {
display:block;
}

/* Show and hide DIVs */
.text {
display:none;
}

[drums]

Hey DTM,
I like your script and it is exactly what I want. But since my CSS skills are still a little lacking I need a little hand-holding...
I entered your stuff into my page and css file. But when I mouseover the link I get an error "Object required" line 69
line 69> currLayerId = id;

This is how I set it up:

<div class="col_1of2 dblbxlg">
<a href="#" alt="" onMouseOver="togLayer('text1'); return false" onMouseOut="togLayer('text0'); return false">Question1</a>
</div></div>

<div class="col_2of2 dblbxlg">
<div id="text1" class="text"><h3>Yada yada</h3><p>Yada yada yadaYada yada yadaYada yada yadaYada yada yadaYada yada yadaYada yada yada</p></div>
I'm sure it's something totally lame but appreciate your guidance!

[drums]

I got rid of the error (didn't label a div id=text0)
But now it's not coming in where I want it.
<!-- begin content wrapper -->
<div id="content">
<div class="prop"></div>
<!-- begin content -->


<div id="text0" class="col_1of2 dblbxlg">
<a href="#" alt="" onMouseOver="togLayer('text1'); return false" onMouseOut="togLayer('text0'); return false">Question1</a>
</div>

<div class="col_2of2 dblbxlg">
<div id="text1" class="text">
<h3>Yada yada</h3><p>Yada yada yadaYada yada yadaYada yada yadaYada yada yadaYada yada yadaYada yada yada</p>

</div></div> </div>



<div id="content-footer"></div>
<!-- end content wrapper ..-->

Now when I mouseover the link the text1 content comes in over the link and not on the right!
I think I'm close just need a little help:)

[drums]

I got it working!!! I shouldn't have added the text0 id in the initial content div.

[dtm32236]

nice.

i'm glad it worked out.