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: 166
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: 166
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


Views: 1704 | Replies: 6
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captcha captchaformproblem cart child close codes date debugger decimal dependent developer disablefirebug dom element embed engine enter events ext file firefox flash focus form forms frameworks game gears getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe index java javascript javascripthelp2020 javascripts jquery jsp jump libcurl listbox maps marquee masterpage math media menu mp4 onerror onmouseoutdivproblem onmouseover onreadystatechange paypal pdf php player position post programming prototype rated redirect safari scale scriptlets scroll search security size software solutions sources star starrating stretch synchronous toggle tweet unicode variables web webkit webservice window \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC