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 ajaxcode ajaxhelp animate api automatically beta boarder box bug calendar card checkbox child class column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file firehose flash form forms game google gwt html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump math matrixcaptcha microsoft mimic mp3 mysql object offline onmouseoutdivproblem onreadystatechange parent passing pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC