Mouseover text effect: Please help

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hello,
Can someone explain how to do the below mouseover text effect, I've
looked at this URL code and even copied the entire code in a front page new
page, but it still didn't work. What am I leaving out. I copied all the
pictures and pasted them in also. The url is below, it is the "red
cascading text effect on the right side of the page, thankyou.
http://www.writersandco.com/services.htm?src=overture#
 
Susutea said:
Hello,
Can someone explain how to do the below mouseover text effect, I've
looked at this URL code and even copied the entire code in a front
page new page, but it still didn't work. What am I leaving out. I
copied all the pictures and pasted them in also. The url is below,
it is the "red cascading text effect on the right side of the page,
thankyou. http://www.writersandco.com/services.htm?src=overture#

Wow,
This is very tricky mouseover on a map with image swap. The text is actually
an image, not text

I wonder whether you would be better off just having text that displays when
you mouseover.
Here is an example.

<html>
<head>
<script type="text/javascript">
function hideit(elid,hide)
{
if (hide != "show")
document.getElementById(elid).style.display="none"
else
document.getElementById(elid).style.display="block"
}
</script>
</head>
<body>
<table border="1">
<tr>
<td width="30%" valign="top" onmouseover="hideit('row1','show')"
onmouseout="hideit('row1','hide')">
Item 1
</td>
<td width="70%" id="row1" style="display:none">
Item 1 Full description<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
</tr>

<tr>
<td width="30%" valign="top" onmouseover="hideit('row2','show')"
onmouseout="hideit('row2','hide')">
Item 2
</td>
<td width="70%" id="row2" style="display:none">
Item 2 Full description<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
</tr>
</table>
</body>
</html>

There may be ways to stop the left column from expanding in height when it
is moused over. (I would have to think about it.)

But this idea may be useful as starting point.
 
This version does not expand the left hand column when moused over

<html>
<head>
<script type="text/javascript">
function hideit(elid,hide)
{
if (hide != "show")
document.getElementById(elid).style.display="none"
else
document.getElementById(elid).style.display="block"
}
</script>
</head>
<body>

<div style="float:left">
<table>
<tr>
<td valign="top" onmouseover="hideit('row1','show')"
onmouseout="hideit('row1','hide')">
Item 1
</td>
</tr>

<tr>
<td valign="top" onmouseover="hideit('row2','show')"
onmouseout="hideit('row2','hide')">
Item 2
</td>
</tr>
</table>
</div>

<div>
<table border="1">
<tr>
<td id="row1" style="display:none">
Item 1 Full description<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
<td id="row2" style="display:none">
Item 2 Full description<br>
Blah blah blah <br>
Blah blah blah <br>
Blah blah blah <br>
</td>
</tr>
</table>
</div>

</body>
</html>
 
Back
Top