Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 2030

Jun 11th, 2008

photo and text swap

Expand Post »

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<a onmouseover="javascript:showHide('jeff'); return showPic(this)" href="/images/group_jeff.jpg" class="560" name="357" >Jeff</a>
<a onmouseover="javascript<b></b>:showHide('jeff'); return showPic(this)" href="/images/group_jeff.jpg" class="560" name="357" >Jeff</a>

Each div of text starts with display:none

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

<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

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Jun 2008

Permalink

Jun 12th, 2008

Re: photo and text swap

Here are the 2 pieces of code

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
//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; 
	} 
}
//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; 
	} 
}

Last edited by designermom2; Jun 12th, 2008 at 10:28 am.

designermom2

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

4 posts
since Jun 2008

Permalink

Jun 13th, 2008

Re: photo and text swap

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
        <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>
        <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>

plazmo

Reputation Points: 23

Solved Threads: 16

Posting Whiz in Training

Offline

206 posts
since Aug 2005

Permalink

Jun 14th, 2008

Re: photo and text swap

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jun 15th, 2008

Re: photo and text swap

Click to Expand / Collapse Quote originally posted by MidiMagic ...

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.

plazmo

Reputation Points: 23

Solved Threads: 16

Posting Whiz in Training

Offline

206 posts
since Aug 2005

Permalink

Jun 19th, 2008

Re: photo and text swap

Right.

Visibility also has a "collapse" property.

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Jun 19th, 2008

Re: photo and text swap

Click to Expand / Collapse Quote originally posted by MidiMagic ...

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.

plazmo

Reputation Points: 23

Solved Threads: 16

Posting Whiz in Training

Offline

206 posts
since Aug 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: block f5 functionality

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: automatically html page has to upload to live website

DaniWeb Message

Cancel Changes

User Name
Password