39 users online (0 members and 39 guests)  


Page 1 of 2 1 2 Last
  Results 1 to 15 of 17

Related

  1. Rollover images with text area    Forum: Javascript Forum
    Replies: 0
  2. Disjointed rollover (Image to Text)    Forum: Website Scripts Forum
    Replies: 4
  3. Image to Text Rollover    Forum: Website Scripts Forum
    Replies: 0
  4. rollover text change    Forum: CSS Forum
    Replies: 3
  1. #1
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    rollover text to display description text

    Hi, I'm new to this forum and have been out of the html game for a long long time so I'm going to classify myself as a newbie

    Okay, I have a list of people's names down one side (this could be in a table) and when you rollover there names I want text to appear on the opposite side. Now this text is the answer to some questions that is also on the page, if that makes sense.

    Okay lets say i have 2 columns, on the left has peoples name, and on the right has a bunch of questions with space underneath where i want text to appear when you click on there names.

    Any help would be much appreciated... and if for some reason the only way this can be done is through a database I will need basic instructions as I've never gone down that path.

    Cheers.

  2. #2
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: rollover text to display description text

    Hi maplesyrup,

    First of all, welcome on board. You might find this link useful:
    http://www.dynamicdrive.com/dynamici...agetooltip.htm
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  3. #3
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    Hi Rangana,

    Thanks for your prompt response. I have seen that effect but what I'm more wanting is the text to appear in the tables under the questions - no floating elements if that makes sense. Is it possible?

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: rollover text to display description text

    Yes. That's possible, hopefully, this should keep you going:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    <script type="text/javascript">
    window.onload=function(){
    var tbl=document.getElementById('mytable'), // Set your table's id.
    tdL=tbl.getElementsByTagName('td');reset();
    for(var i=0;i<tdL.length;i++)
    	{
    	if(tdL[i].className=='name'){
    	tdL[i].onmouseout=reset;
    	tdL[i].onmouseover=function(){
    		this.parentNode.getElementsByTagName('td')[1].style.display='';}
    	tdL[i].onclick=function(){
    		var ans=this.getAttribute('rel');
    		document.getElementsByTagName('tr')[ans].getElementsByTagName('td')[0].style.display='';}}}}
    function reset()
    {
    var tbl=document.getElementById('mytable'), // Set your table's id.
    tdL=tbl.getElementsByTagName('td');
    for(var i=0;i<tdL.length;i++)
    tdL[i].style.display=(tdL[i].className!='name')?'none':'';
    }
    </script>
    <style type="text/css">
    *{margin:0px;padding:0px;}
    .name{vertical-align:top;}
    table{width:200px;margin:10px auto;}
    td{padding:5px;}
    </style>
    </head>
    <body>
    <table cellspacing="1px" id="mytable">
    	<tr>
    	<td rowspan="2" class="name" rel="1">Name 1</td>
    	<td>Question Here</td>
    	</tr>
    	<tr><td>Answer Here</td></tr>
    	<tr>
    	<td rowspan="2" class="name" rel="3">Name 2</td>
    	<td>Question Here</td>
    	</tr>
    	<tr><td>Answer Here</td></tr>
    	<tr>
    	<td rowspan="2" class="name" rel="5">Name 3</td>
    	<td>Question Here</td>
    	</tr>
    	<tr><td>Answer Here</td></tr>
    	<tr>
    	<td rowspan="2" class="name" rel="7">Name 4</td>
    	<td>Question Here</td>
    	</tr>
    	<tr><td>Answer Here</td></tr>
    	<tr>
    	<td rowspan="2" class="name" rel="9">Name 5</td>
    	<td>Question Here</td>
    	</tr>
    	<tr><td>Answer Here</td></tr>
    	<tr>
    	<td rowspan="2" class="name" rel="11">Name 6</td>
    	<td>Question Here</td>
    	</tr>
    	<tr><td>Answer Here</td></tr>
    	<tr>
    	<td rowspan="2" class="name" rel="13">Name 7</td>
    	<td>Question Here</td>
    	</tr>
    	<tr>
    	<td>Answer Here</td>
    	</tr>
    </table>
    </body>
    </html>
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    I really appreciate your help. That's exactly along the lines but I need to keep the question and answer boxes in the same spot. All the questions are the same just there answers will be different. can we do this?

  6. #6
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: rollover text to display description text

    That'll be much simplier. Could you post your markup (HTML), just simple one on how is it structured at your end. I'll try to whip one for you.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  7. #7
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    really. i'd really appreciate it. let me whip something quickly up. 2 secs (well maybe 5 mins)

  8. #8
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    okay here's something really basic as i haven't set up anything of the real project yet as i didn't know whether "I" could achieve it but it looks like i can now that i have found this forum and your friendly response.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <table width="170" border="1">
    <tr>
    <td width="61">name1</td>
    <td width="93">question 1?</td>
    </tr>
    <tr>
    <td>name2</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>name 3</td>
    <td>question 2?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 3?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 4?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 5?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <p>when you click on name 1 these are the results - these would be in the same table above but now displaying the answers.</p>
    <table width="343" border="1">
    <tr>
    <td width="61">name1</td>
    <td width="266">question 1?</td>
    </tr>
    <tr>
    <td>name2</td>
    <td>answer 1 for name1</td>
    </tr>
    <tr>
    <td>name 3</td>
    <td>question 2?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name1.</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 3?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name1</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 4?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name1</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 5?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name1</td>
    </tr>
    </table>
    <p>when you click on name 2 these are the results</p>
    <table width="343" border="1">
    <tr>
    <td width="61">name1</td>
    <td width="266">question 1?</td>
    </tr>
    <tr>
    <td>name2</td>
    <td>answer 1 for name2</td>
    </tr>
    <tr>
    <td>name 3</td>
    <td>question 2?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 3?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 4?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name2</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>question 5?</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>answer for name2</td>
    </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>

  9. #9
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    am i allowed to ask a very simple off the topic question whilst your chatting with me? If not i will start a new post. I just wanted to ask. I have a table in in one row I want to line it all the way across with one row of dots. I have made a single dot 3px by 3px and used it as the bg image of that cell but it repeated down vertically. So i added a spacer of the same dimensions thinking the cell would adhere to that but it doesn't it still wants to repeat about 4-5 times. Any ideas?

  10. #10
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    ignore my last request (on no vertical epeating) as i finally worked it out

  11. #11
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: rollover text to display description text

    How about the onmouseover? Apologies, but I could not whip now until monday as I'm having (all) my majors in school. I'll be back on Tuesday together with the code.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  12. #12
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    if it is possible to have it stay whilst it is has been clicked would be best. No apologies required, totally understandable. I totally appreciate all your help and whenever you have a spare moment is fine. thanks again and good luck with school.

  13. #13
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: rollover text to display description text

    Hope these two choices keeps you going:
    • Manual:
      HTML Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Untitled Document</title>
      <script type="text/javascript">
      window.onload=function()
      {
      var name1=document.getElementById('name1'), // ID of <td> that holds name 1
      name2=document.getElementById('name2'), // ID of <td> that holds name 2
      name3=document.getElementById('name3'), // ID of <td> that holds name 3
      
      ans1=document.getElementById('ans1'), // ID of <td> that holds answer 1
      ans2=document.getElementById('ans2'), // ID of <td> that holds answer 2
      ans3=document.getElementById('ans3'), // ID of <td> that holds answer 3
      ans4=document.getElementById('ans4'), // ID of <td> that holds answer 4
      ans5=document.getElementById('ans5'), // ID of <td> that holds answer 5
      
      nA1='This is the answer for question no1 for name1', // answer for question no1 for name1
      nA2='This is the answer for question no1 for name2', // answer for question no1 for name2
      nA3='This is the answer for question no1 for name3', // answer for question no1 for name3
      
      nB1='This is the answer for question no2 for name1', // answer for question no1 for name1
      nB2='This is the answer for question no2 for name2', // answer for question no2 for name2
      nB3='This is the answer for question no2 for name3', // answer for question no2 for name3
      
      nC1='This is the answer for question no3 for name1', // answer for question no1 for name1
      nC2='This is the answer for question no3 for name2', // answer for question no2 for name2
      nC3='This is the answer for question no3 for name3'; // answer for question no3 for name3
      
      name1.onclick=function(){ans1.innerHTML=nA1;ans2.innerHTML=nB1;ans3.innerHTML=nC1;}
      name2.onclick=function(){ans1.innerHTML=nA2;ans2.innerHTML=nB2;ans3.innerHTML=nC2;}
      name3.onclick=function(){ans1.innerHTML=nA3;ans2.innerHTML=nB3;ans3.innerHTML=nC3;}
      }
      </script>
      </head>
      <body>
      <table style="width:170px;">
      <tr>
      <td style="width:61px;" id="name1">name1</td>
      <td width="93">question 1?</td>
      </tr>
      <tr>
      <td id="name2">name2</td>
      <td id="ans1">&nbsp;</td>
      </tr>
      <tr>
      <td id="name3">name 3</td>
      <td>question 2?</td>
      </tr>
      <tr>
      <td id="name4">name 4</td>
      <td id="ans2">&nbsp;</td>
      </tr>
      <tr>
      <td id="name5">name 5</td>
      <td>question 3?</td>
      </tr>
      <tr>
      <td id="name6">name 6</td>
      <td id="ans3">&nbsp;</td>
      </tr>
      <tr>
      <td id="name7">name 7</td>
      <td>question 4?</td>
      </tr>
      <tr>
      <td id="name8">name 8</td>
      <td id="ans4">&nbsp;</td>
      </tr>
      <tr>
      <td id="name9">name 9</td>
      <td>question 5?</td>
      </tr>
      <tr>
      <td id="name10">name 10</td>
      <td id="ans5">&nbsp;</td>
      </tr>
      </table>
      <p>when you click on name 1 these are the results - these would be in the same table above but now displaying the answers.</p>
      </body>
      </html>
    • If (basing on your example), the only portion that will be changing will be the name portion, then it would be like this:
      HTML Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Untitled Document</title>
      <script type="text/javascript">
      window.onload=function()
      {
      reset('none');
      for(var i=0,name=document.getElementsByTagName('td');i<name.length;i++)
      	{
      	if(name[i].className.toLowerCase()=='name')
      		{
      		name[i].onclick=function()
      			{
      			reset(' ');
      			for(var i=0,ans=document.getElementsByTagName('td');i<ans.length;i++)
      				{
      				ans[i].style.display='';
      				if(ans[i].className.toLowerCase()=='ans')
      					{
      					ans[i].innerHTML='Answer for '+this.innerHTML;
      					}
      				}
      			}
      		}
      	}
      }
      function reset(e)
      {
      for(var i=0,ans=document.getElementsByTagName('td');i<ans.length;i++)
      	{
      	if(ans[i].className.toLowerCase()=='ans')
      	ans[i].style.display='none';
      	}
      }
      </script>
      </head>
      <body>
      <table style="width:170px;">
      <tr>
      <td style="width:61px;" class="name">name1</td>
      <td width="93">question 1?</td>
      </tr>
      <tr>
      <td class="name">name2</td>
      <td class="ans"></td>
      </tr>
      <tr>
      <td class="name">name 3</td>
      <td>question 2?</td>
      </tr>
      <tr>
      <td class="name">name 4</td>
      <td class="ans"></td>
      </tr>
      <tr>
      <td class="name">name 5</td>
      <td>question 3?</td>
      </tr>
      <tr>
      <td class="name">name 6</td>
      <td class="ans"></td>
      </tr>
      <tr>
      <td class="name">name 7</td>
      <td>question 4?</td>
      </tr>
      <tr>
      <td class="name">name 8</td>
      <td class="ans"></td>
      </tr>
      <tr>
      <td class="name">name 9</td>
      <td>question 5?</td>
      </tr>
      <tr>
      <td class="name">name 10</td>
      <td class="ans"></td>
      </tr>
      </table>
      <p>when you click on name 1 these are the results - these would be in the same table above but now displaying the answers.</p>
      </body>
      </html>


    Hope that keeps you going.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  14. #14
    maplesyrup's Avatar
    New User

    Status
    Offline
    Join Date
    Jul 2008
    Posts
    10

    Re: rollover text to display description text

    I've been down with the flu so I've just got back on my computer to check emails and I was so excited when I saw yours. Hopefully I'm feeling better today and I can get cracking on my project bundled with all you coding tips. Again, thank you so much as your precious time has been really appreciated.

  15. #15
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: rollover text to display description text

    maplesyrup,

    First off allow me to extend a great big welcome to the ahfb forums.

    I want to thank you for taking the time to write me expressing your gratitude for the level of help which rangana provided to you. I too appreciate and respect rangana for the selfless efforts he puts into helping others.

    Kudos to rangana, keep up the great work!

    Dave
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting



Page 1 of 2 1 2 Last

Tags for this Thread