Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mouse out text-effect and mouse on text-effect

    I like to make something like the following mouse on-out effect.

    If the page is opened, it will show "mouse out text."
    If the user put his mouse on the text, it will show "mouse on text."
    If the mouse is not on the text, it will show "mouse out text."

    It would be something like the following Code.

    Code:
     would-be code
    <table>	
    	<if mouse is out>
    		<tr>
    			<td>Your mouse is out of this text at the moment.</td>
    		</tr>
    	</cfif>
    	
    	<if mouse is on> 
    	<tr>
    		<td>Your mouse is on this text at the moment.</td>
    	</tr>
    	</cfif>	
    </table>
    Would you guide me the correct ways for that?

    Thanks in Advance
    Get my greedy up

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <table>
    <tr>
    <td 
    onmouseover="innerHTML = 'Your mouse is on this text at the moment.'" 
    onmouseout="innerHTML = 'Your mouse is out of this text at the moment.'">
    Your mouse is out of this text at the moment.
    </td>
    </tr>
    </table>

  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there joonstar,

    This code will give different text to individual cells (as many as you want)
    onmouseover and onmouseout
    Code:
    <html>
    <head>
    <title>text changer</title>
    
    <style type="text/css">
    <!--
    table {
         border:solid 1px #000000;
     }
    td {
         width:162px;
         height:100px;
         padding:20px 10px 10px 10px;
         border:solid 1px #000000;
         font-family:arial;
         font-size:16px;
     }
    //-->
    </style>
    <script type="text/javascript">
    <!--
    var text=new Array();
    text[1]="this is the text for cell one onmouseover";
    text[2]="and this is text for cell two onmouseover";
    text[3]="and this is text for cell three onmouseover";
    text[4]="this is the text for cell one after onmouseout";
    text[5]="and this is text for cell two after onmouseout";
    text[6]="and this is text for cell three after onmouseout";
    
    function changeText(el,n) {
         el.innerHTML= text[n];
         elo=el;
         no=n+3;               /* this number must be set to the number of table cells*/
    document.onmouseout=function() {
         elo.innerHTML=text[no];
      }
     }
    //-->
    </script>
    
    </head>
    </body>
    
    <table><tr>
    <td onmouseover="changeText(this,1)">
    Your mouse is out of this text at the moment.
    </td>
    </tr><tr>
    <td onmouseover="changeText(this,2)">
    Your mouse is out of this text at the moment also.
    </td>
    </tr><tr>
    <td onmouseover="changeText(this,3)">
    And your mouse is out of this text at the moment as well.
    </td>
    </tr></table>
    
    </body>
    </html>
    coothead

  • #4
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, neofibril and coothead

    neofibril's code is perfect solution for what I ask.

    coothead's code is the solution for what I like to ask next
    Get my greedy up


  •  

    Posting Permissions

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