www.webdeveloper.com
Results 1 to 4 of 4

Thread: on mouseout of letter-image output to textarea without removing former text

  1. #1
    Join Date
    Jun 2012
    Posts
    13

    on mouseout of letter-image output to textarea without removing former text

    Hi everybody

    I don't know much about the theory of Javascript, but with cut and paste of code I usually can make the effects that I need.
    This time I was looking around on the web for days but did not find what I needed.

    On http://paradigm-shift-21st-century.n...y/example.html I provided a simple example of what I tried to do.
    When I mouse over the A image or B image I want to send an A or B to the textarea, to make words like ABBA

    I think this can be done, but have no clue how to do it.
    The sourcecode is easy to retrieve from the example.
    Doe anybody have a suggestion how to make the needed javascript function or where to look for an example on internet

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356

    Lightbulb

    One, of many, possibilities...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    img { width:60px;  height:60px; }
    img:hover {
          width:90px;  height:60px;
          border-color:#666666; 
          border-bottom: 5px solid;
          border-top: 5px solid
    }    
    </style>
    </head>
    
    <body >
    <DIV ALIGN="center">
    <p>
     <img src="http://paradigm-shift-21st-century.nl/zigzagkey/images/a.png" alt="a" onmouseout="outputtotextarea(this.alt)"> . . . 
     <img src="http://paradigm-shift-21st-century.nl/zigzagkey/images/b.png" alt="b" onmouseout="outputtotextarea(this.alt)"> . . . 
    <p> <br> <p>
    
    <textarea rows="4" cols="50" id="TArea">
    Here the onMouseout output when hovering over character, without replacing the former text
    For instance: ABBA
    
    </textarea>
    <button onclick="document.getElementById('TArea').value = ''">Clear</button>
    </DIV>
    
    <script type="text/javascript">
    function outputtotextarea(ch) {
      var sel = document.getElementById('TArea').value += ch;
      return false;
    }
    </script>
    
    </body>
    </html>
    Good Luck!

  3. #3
    Join Date
    Jun 2012
    Posts
    13
    hi jmrker

    amazing.
    Works flawlessly!

    Thanks, thanks, thanks

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,356
    You're most welcome.
    Happy to help.
    Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles