photo and text swap

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Jun 2008
Posts: 4
Reputation: designermom2 is an unknown quantity at this point 
Solved Threads: 0
designermom2 designermom2 is offline Offline
Newbie Poster

photo and text swap

 
0
  #1
Jun 11th, 2008
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) 
  1. <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
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <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!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 4
Reputation: designermom2 is an unknown quantity at this point 
Solved Threads: 0
designermom2 designermom2 is offline Offline
Newbie Poster

Re: photo and text swap

 
0
  #2
Jun 12th, 2008
Here are the 2 pieces of code

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. //Text Show/Hide
  2.  
  3. function showHide(elementid){
  4. if (document.getElementById(elementid).style.display == 'none'){
  5. document.getElementById(elementid).style.display = '';
  6. } else {
  7. document.getElementById(elementid).style.display = 'none';
  8. }
  9. }
  10.  
  11. // Image Swap
  12. function showPic (whichpic) { 
  13. 	if (document.getElementById) { 
  14. 		document.getElementById('placeholder').src = whichpic.href; 
  15. 		document.getElementById('popuplink').href = whichpic.href; 
  16. 		document.getElementById('popuplink').className = whichpic.className; 
  17. 		document.getElementById('popuplink').name = whichpic.name; 
  18.   if (whichpic.title) { 
  19. 			document.getElementById('placeholder').alt = whichpic.title; 
  20. 		} 
  21. 		return false; 
  22. 	} else { 
  23. 		return true; 
  24. 	} 
  25. }
Last edited by designermom2; Jun 12th, 2008 at 10:28 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 206
Reputation: plazmo is an unknown quantity at this point 
Solved Threads: 16
plazmo's Avatar
plazmo plazmo is offline Offline
Posting Whiz in Training

Re: photo and text swap

 
0
  #3
Jun 13th, 2008
you can move these events out into a function, but im just keeping it simple.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.         <div onmouseover="document.getElementById('img1').style.display='block';document.getElementById('txt1').style.display='none';" 
  2.             onmouseleave="document.getElementById('txt1').style.display='block';document.getElementById('img1').style.display='none';">
  3.             <img id="img1" src="img1.jpg" style="display: none;">
  4.             <div id="txt1" style="display: block">
  5.                 text 1</div>
  6.         </div>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: photo and text swap

 
0
  #4
Jun 14th, 2008
Display has the attribute 'hidden', not 'none'.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 206
Reputation: plazmo is an unknown quantity at this point 
Solved Threads: 16
plazmo's Avatar
plazmo plazmo is offline Offline
Posting Whiz in Training

Re: photo and text swap

 
0
  #5
Jun 15th, 2008
•
•
•
•
Originally Posted by MidiMagic View Post
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jan 2007
Posts: 3,210
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: photo and text swap

 
0
  #6
Jun 19th, 2008
Right.

Visibility also has a "collapse" property.

I thought you didn't want the structure to change.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2005
Posts: 206
Reputation: plazmo is an unknown quantity at this point 
Solved Threads: 16
plazmo's Avatar
plazmo plazmo is offline Offline
Posting Whiz in Training

Re: photo and text swap

 
0
  #7
Jun 19th, 2008
•
•
•
•
Originally Posted by MidiMagic View Post
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.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxexample ajaxjspservlets api autoplay blackjack browser bug captchaformproblem checkbox child class close codes cookies createrange() cursor date debugger dependent developer disablefirebug dom dropdown editor element embed engine events explorer ext file flash form forms game getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images internet java javascript javascripthelp2020 jquery jsf jsfile jump libcurl maps math matrixcaptcha media mp3 mysql object onerror onmouseoutdivproblem onreadystatechange parent passing paypal pdf php player position post programming progressbar rated runtime safari scriptlets scroll search security session shopping size software star stars stretch synchronous tweet unicode variables web webkit webservice window wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC