photo and text swap

[designermom2]

I am trying to swap an image with 6 guys on a couch for each one sitting individual. And once the individual is showing, display their bio underneath. I can get the image to change and the text to show but when I roll to the next guy the text doesn't swap but overlaps. I am very new to Javascript so speak down to me, thanks :)

<a onmouseover="javascript:showHide('jeff'); return showPic(this)" href="/images/group_jeff.jpg" class="560" name="357" >Jeff</a>

Each div of text starts with display:none

<div id="jeff" style="display:none">

When I mouseover, the ShowHide displays the text, the return ShowPic shows the image but then I need that text to go away when I mouse off or mouse over the next person's name.

Thanks for your help!!

[designermom2]

Here are the 2 pieces of code

//Text Show/Hide

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

// Image Swap
function showPic (whichpic) { 
	if (document.getElementById) { 
		document.getElementById('placeholder').src = whichpic.href; 
		document.getElementById('popuplink').href = whichpic.href; 
		document.getElementById('popuplink').className = whichpic.className; 
		document.getElementById('popuplink').name = whichpic.name; 
  if (whichpic.title) { 
			document.getElementById('placeholder').alt = whichpic.title; 
		} 
		return false; 
	} else { 
		return true; 
	} 
}

[plazmo]

you can move these events out into a function, but im just keeping it simple.

<div onmouseover="document.getElementById('img1').style.display='block';document.getElementById('txt1').style.display='none';" 
            onmouseleave="document.getElementById('txt1').style.display='block';document.getElementById('img1').style.display='none';">
            <img id="img1" src="img1.jpg" style="display: none;">
            <div id="txt1" style="display: block">
                text 1</div>
        </div>

[MidiMagic]

Display has the attribute 'hidden', not 'none'.

[plazmo]

Display has the attribute 'hidden', not 'none'.

no, display:none is correct.
your thinking of visibility:hidden

and display:none is better then visibility:hidden because it actually collapses the element rather then just hiding it and leaving a big empty space.

[MidiMagic]

Right.

Visibility also has a "collapse" property.

I thought you didn't want the structure to change.

[plazmo]

Right.

Visibility also has a "collapse" property.

I thought you didn't want the structure to change.

collapse is only useful for table rows or columns. otherwise its rendered as just hidden on any other element.
it wont change the structure if the text and the image are the same size.