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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts

    mouse on which text effect.

    I like to make something like the following.

    The text is fixed, 'your mouse is on "red", on "blue".'

    If the page is opened, it will show the text in black.
    If the user put his mouse on the phrase "red", it will show the text in red.
    If the user put his mouse on the phrase "blue", it will show the text in blue.
    If the user put his mouse out of the phrase "red" or "blue", it will show the text in black.


    Code:
    would-be code
    <table>
       <tr>
          <td>
             <if your mouse is on "red">
                <font color="red">your mouse is on "red", on "blue."</font>
             </if>
             <if your mouse is on "green">
    	<font color="blue">your mouse is on "red", on "blue."</font>
             </if>
             <if your mouse is out of text>
    	your mouse is on "red", on "blue".		
             </if>
          </td>
       </tr>
    </table>
    Thanks in Advance
    Last edited by joonstar; 06-19-2004 at 05:15 PM.
    Get my greedy up

  • #2
    New Coder
    Join Date
    May 2004
    Location
    Some place called the Earth I think...
    Posts
    99
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    <body style="font-weight:bold;">

    <table>
    <tr>
    <td>
    <cfif your mouse is on "red">
    <font color="red" onmouseover="body.style.color='red';">your mouse is on "red", on "blue."</font>
    </cfif>
    <cfif your mouse is on "green">
    <font color="blue" onmouseover="body.style.color='green';">your mouse is on "red", on "blue."</font>
    </cfif>
    <cfif your mouse is out of text>
    <font color="black" onmouseover="body.style.color='black';">your mouse is on "red", on "blue".</font>
    </cfif>
    </td>
    </tr>
    </table>
    <br><BR>


    Blah Blah Blah Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
    Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah


    (the "font weight" thing is only to see the colors better)
    Dont do drugs, get high on life

    13 years and getting nowhere fast.....


    đ­˘M_M÷˝kŔą

  • #3
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, your code doesn't work.


    "<cfif your mouse is on "red">" is just a explanation for my idea.
    It doesn't really work.
    Get my greedy up

  • #4
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The follwoing is more refined would-be code.

    Code:
    would-be code
    
    <table>
       <tr>
          <if mouse is on "red">
             <td style="font-size:12pt; color:red;">
                Your mouse is on "red", on "blue".
             </td>	
          <if mouse is on "blue">
             <td style="font-size:12pt; color:blue;">
                Your mouse is on "red", on "blue".
             </td>
          <else>	
             <td style="font-size:12pt; color:black;">
                Your mouse is on "red", on "blue".
             </td>
          </if>
       </tr>
    </table>
    Thanks in Advance
    Get my greedy up

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

    I have just amended the original code that I posted.
    You can change the over and out colors to suit your needs.

    If you want to, you can carry this process further by changing
    anything that you desire....
    background, font, border etc.

    Anyway here is the latest code...
    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,over,out) {
         el.innerHTML= text[n];
         el.style.color=over;
         elo=el;
         outo=out;
         no=n+3;               /* this number must be set to the number of table cells*/
    document.onmouseout=function() {
         elo.innerHTML=text[no];
         el.style.color=outo;
      }
     }
    //-->
    </script>
    
    </head>
    </body>
    
    <table><tr>
    <td onmouseover="changeText(this,1,'#800000','#008000')">
    Your mouse is out of this text at the moment.
    </td>
    </tr><tr>
    <td onmouseover="changeText(this,2,'#000080','#808000')">
    Your mouse is out of this text at the moment also.
    </td>
    </tr><tr>
    <td onmouseover="changeText(this,3,'#008000','#000000')">
    And your mouse is out of this text at the moment as well.
    </td>
    </tr></table>
    
    </body>
    </html>
    coothead

  • #6
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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]='<font color=red>Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.</font>';
    text[2]='<font color=blue>Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.</font>';
    text[3]='<font color=green>Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.</font>';
    text[4]='Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.';
    text[5]='Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.';
    text[6]='Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.';
    
    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 on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.
    	</td>
    </tr>
    <tr>
    	<td onmouseover="changeText(this,2)">
    		Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.
    	</td>
    </tr>
    <tr>
    	<td onmouseover="changeText(this,3)">
    		Your mouse is on the word <b>"red"</b>, <b>"blue"</b>, <b>"green"</b>.
    	</td>
    </tr>
    </table>
    
    </body>
    </html>
    The above is what I made by your former help.

    I have two problems here.

    (1) when the page is opened, it should show " one sentence" but it
    shows three same sentences.

    (2) It should change to text[1], text[2], text[3] when the mouse is on the word "red", "blue", "green" in that order.



    If you see the result of the following code, It might help you what I am trying to do.

    The following code has its advantage.
    But I like your code because it is much more flexible.
    Your code can do not only changing the color but also another text effect, i.e., making it bold, or italic.
    Code:
    <style type="text/css">                           
    	a:hover {          color: black;     }               
    	a:active {          color:black;     }     
    	a:visited{          color:black;     }     
    	.link {          text-decoration: none     }     
    </style>
    
    <table>
    	<tr>
    		<td>color change test</td>
    	</tr>
    	<tr>
    		<td id="myTextBlock">
    			your mouse is on 
    				<a id="myRedLink" href="javascript:void(0);" 
    					onmouseover="myTextBlock.style.color='#ff0000';myBlueLink.style.color='#ff0000';myRedLink.style.color='#ff0000';" 
    					onMouseOut="myTextBlock.style.color='#000000';myBlueLink.style.color='#000000';myRedLink.style.color='#000000';">
    					
    					"red"</a>, on 
    					
    				<a id="myBlueLink" href="javascript:void(0);"  
    					onmouseover="myTextBlock.style.color='#0000ff';myRedLink.style.color='#0000ff';myBlueLink.style.color='#0000ff';" 
    					onMouseOut="myTextBlock.style.color='#000000';myRedLink.style.color='#000000';myBlueLink.style.color='#000000';">
    					
    					"blue"</a>
    		</td>
    	</tr>
    </table>
    Last edited by joonstar; 06-19-2004 at 11:44 PM.
    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
    •