SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking print text triggering onmouseover()

    Hi all!

    I need to print text dinamically in a object(not input or textarea, maybe with div) when I do onmouseover;

    Someone could point me on the right direction please.

  2. #2
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So just double checking, when you mouse over an element (which element?) you want certain text to be displayed elsewhere on the page? Correct?

    Regards,
    Jordan

  3. #3
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If this is what you want, here you go.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
      <head>
    
        <title>MouseOver</title>
        <script type="text/javascript">
        
          function displayText(id)
          {
            var el = document.getElementById(id);
    
            el.style.display = 'block';
          }
    
          function hideText(id)
          {
            var el = document.getElementById(id);
    
            el.style.display = 'none';
          }
        
        </script>
        
      </head>
      
      <body>
    
        <a href="#" onmouseover="displayText('hiddentext')" onmouseout="hideText('hiddentext')">Display Text</a>
    
        <p id="hiddentext" style="display: none;">Mouseover shows/hides this text by modifying the <span style="color: #f00;">style.display</span> property.</p>
    
    	</body>
      
    </html>
    Regards,
    Jordan

  4. #4
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking ok!

    Sorry if i didn't explain myself clearly.

    What I need is when I do onmouseover in a cell table:

    <td onMouseOver="showtext('text1','text2')"></td>

    display the text in other cell table. I don't want to use a <input type='text> or <textarea>.

  5. #5
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up nice!

    thanks men!

    but see, the values of my variables are dinamic.

    <td onMouseOver="showtext('<?php print $text1 ?>','<?php print $text2 ?>')"></td>

  6. #6
    I ♥ PHP
    Join Date
    Jul 2003
    Location
    Melbourne, Australia
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the page please with all of the values visible, and explain which need to be hidden.shown in what circumstances. I understand sort of, but I don't get what changes due to the dynamic nature? All that code is doing is changing the visibility style of a <p> tag.

  7. #7
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking ok!

    Here is the code.

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <table width="400" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td width="153" height="20" onMouseOver="show('text1')">rollover here</td>
    <td width="241">In this cell I want to display text1</td>
    </tr>
    </table>

    </body>
    </html>
    <script language="JavaScript">
    function show(text){

    }
    </script>

  8. #8
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy first try!

    I have been trying to solve this problem, this is my first try.

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body>
    <table width="400" border="1" cellspacing="0" cellpadding="0">
    <tr>
    <td width="153" height="20" onMouseOver="show('text ')" onMouseOut="hide()">rollover here</td>
    <td width="241">the text is: <div id="output"></div></td>
    </tr>
    </table>

    </body>
    </html>
    <script language="JavaScript">
    function show(h){
    var el = document.getElementById('output');
    el.appendChild(document.createTextNode(h));
    el.style.display="";
    }

    function hide(){
    var el = document.getElementById('output');
    el.style.display="none";
    }
    </script>

    But it is not really what I want, I just want to display the text not append it.

    Any suggestion will be appreciated.

  9. #9
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean like this:
    Code:
    function show(h){
    	var el = document.getElementById('output'); 
    	el.innerHTML = h;
    	el.style.display="";
    }
    ?

  10. #10
    SitePoint Enthusiast erickkz's Avatar
    Join Date
    Dec 2005
    Location
    Earth
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up nice!

    easy and simple, thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •