...

View Full Version : onmouseover text rollover



Laura
10-07-2002, 03:20 PM
I'm trying to change or rollover text using onmouseover/onmouseout. I understand how to do this with images. I'm having trouble doing this with regular text as part of a paragraph. Seems like it should be easy but it's driving me nuts. And, please, I need to be spoonfed. I'm green. Thanks!

Mr J
10-07-2002, 04:03 PM
Here is a simply way



<span onmouseover="this.innerText='told you didn\t I.'" onmouseout="this.innerText='Refresh the page to see again.'" style="width:420">Place your mouse over this text and it will disappear </span>

Laura
10-07-2002, 05:42 PM
Thanks, that WAS easy. Now, I want the color to fade with the text change. It works without the mouseover/mouseout commands. Any suggestions as to how to get them to work together?
<span <a href="fader.js"
onmouseover="this.innerText='Told you so'"
onmouseout="this.innerText='Refresh page to see again'"
style="width:200">
<b>Place mouse here</b></a></span>

Thanks, much.

Laura
10-07-2002, 05:54 PM
Thanks, that WAS easy. Now, I want the color to fade with the text change. It works without the mouseover/mouseout commands. Any suggestions as to how to get them to work together?
<span <a href="fader.js"
onmouseover="this.innerText='Told you so'"
onmouseout="this.innerText='Refresh page to see again'"
style="width:200">
<b>Place mouse here</b></a></span>

Thanks, much.

Bosko
10-07-2002, 07:31 PM
You should change innerText to innerHTML if you wish it to work with Mozilla and Konqueror.

Laura
10-07-2002, 07:59 PM
Thanks for the suggestion but it didn't work for me. I've attached the fader routine in case this might help. Is there any hope?

Mr J
10-07-2002, 09:18 PM
Try this:




<a href="#null" id="link1" onmouseover="this.innerText='told you didn\t I.';findLink(this.id)" onmouseout="this.innerText='Refresh the page to see again.';clearFade()" style="width:420"><b>Place mouse here</b></a>





In your example I notice you have "fader.js" as the link location.

Why?

Laura
10-08-2002, 04:12 PM
Because <a href="fader.js"> seems to work. That is the code I found when I opened the file. I'm the one that added the mouseover/mouseout commands. The original code (before I got into it and messed it up) goes like this:

<p align=center>
<font face="Forte MT"><font size=+6>
<a href="fader.js"><b>We're Focused</b>
</a></font></font>
</p>

My goal is to make
<b>We're Focused</b>
change to
<b>on Excellence</b>

AND gradually fade to a different color at the same time.

Fader.js does the fade and changes colors.

I guess I'm confused as to how I get the code you suggest to do the fade/color change thing. Will I have to embed the change in text actually in the fader.js routine? If so, I'm SOL because it's WAY over my head.

Mr J
10-08-2002, 07:51 PM
The normal way to access a .js file, such as fader.js, is as follows

<script language="javascript" src="fader.js"></script>

The above line is placed in the HEAD section.


onload="init()" has to be included in the opening BODY tag

<BODY onload="init()">


Fader will work with the following link



<a href="#null" id="link1" onmouseover="this.innerText='told you didn\t I.';findLink(this.id)" onmouseout="this.innerText='Refresh the page to see again.';clearFade()" style="width:420"><b>Place mouse here</b></a>

Laura
10-08-2002, 09:20 PM
This works great! Thanks for the help!

Laura
10-08-2002, 11:00 PM
It works great on the first word. On the next word, the fade works only on the first word (which is not what I want.) The text changes, but not the fade/color. I have six words that should change color/text. Here is code for the first two:

<BODY onload="init()">
<p align=left><font face="Monotype Corsiva"><font size=+7>
<a href="#null" id="link1" onmouseover="this.innerText='are great!';findLink(this.id)"
onmouseout="this.innerText='Our Customers';clearFade()" style="width:350">
<b>Our Customers</b></a></font></font>


<font face="Poor Richard"><font size=+4>
<a href="#null" id="link1" onmouseover="this.innerText=' ... on Excellence';findLink(this.id)"
onmouseout="this.innerText='We’re Focused';clearFade()" style="width:300">
<b>We're Focused</b></a></font></font>

I've tried several things---no success. Any suggestions?

Mr J
10-09-2002, 12:23 AM
I have tried your links and you are right they do not work.

Firstly.

Each link ID must be different,

IE .... id=link1 id=link2 etc



Looking in the script I think I found where a problem is but having changed it to work as you require means that it will not work as it was intended, unless I can correct that as well.


Download fader2.txt and save as fader2.js
NOTE that I have changed the name to fader2

Change your link ID's so that they are not the same, and let me know how it goes.

Laura
10-09-2002, 04:06 PM
I works great! Thank you, again, for your help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum