JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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



acid2 ajax ajaxcode ajaxexample ajaxhelp animate array automatically beta box bug calendar cart checkbox class codes column cookies createrange() css cursor date debugger decimal design dom download dropdown editor element embed enter error explorer firefox focus frameworks getselection google gwt hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math menu microsoft mimic mp4 object onmouseover parent paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search select session shopping size sql text textarea toggle variables w3c website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC