...

View Full Version : mouse on which text effect."



joonstar
06-19-2004, 04:03 PM
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.



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

DooM_MonkeY
06-19-2004, 05:04 PM
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)

joonstar
06-19-2004, 05:18 PM
Sorry, your code doesn't work.


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

joonstar
06-19-2004, 06:04 PM
The follwoing is more refined would-be 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

coothead
06-19-2004, 08:55 PM
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. :D

Anyway here is the latest 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

joonstar
06-19-2004, 10:50 PM
<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.


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum