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 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question onmouseover text rollover

    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!

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>



  • #3
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I knew it was simple. Now . . .

    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.

  • #4
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I knew it was simple. Now . . .

    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.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You should change innerText to innerHTML if you wish it to work with Mozilla and Konqueror.

  • #6
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No luck with this

    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?
    Attached Files Attached Files

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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?

  • #8
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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>


  • #10
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This works great! Thanks for the help!

  • #11
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I may have spoken too soon . . .

    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?

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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.
    Attached Files Attached Files

  • #13
    New Coder
    Join Date
    Oct 2002
    Location
    Lawrence, Kansas
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I works great! Thank you, again, for your help!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •