...

View Full Version : mouse out text-effect and mouse on text-effect



joonstar
06-19-2004, 11:43 AM
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.


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

neofibril
06-19-2004, 01:15 PM
<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>

coothead
06-19-2004, 03:25 PM
Hi there joonstar,

This code will give different text to individual cells (as many as you want)
onmouseover and onmouseout :cool:


<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

joonstar
06-19-2004, 05:34 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum