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

Thread: Text Rollover

  1. #1
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts

    Question Text Rollover

    Heh, I'm a bit stuck here. Wondering if anyone knows how to do something like an image rollover but with pure text. I have the following line:

    <td>Hitsugaya Tōshirō</td>

    When the user mouses over the text I want it to in essence change to:

    <td>Hitsugaya Toushirou</td>


    And when they mouse out I want the text to return to its original state. Any ideas?

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    lots of ideas really. is this text a link by chance? if it is no problem. If it's just text than a hover state needs to be used for IE to play along. Show some more code and it should eb workable either way.

    if its just text tan the hover state wont apply for ie if javascript is turned off.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    No, as the code implies it is not a link or there would be anchor tags surrounding the text. I left the table-cell tags in so that it would be clear what context the text was in; the remainder of the code should have no bearing on how this would work except perhaps that I'm coding in XHTML 1.1.

    I assume that there's some solution that I can either apply to the table-cell or the text directly, such as through span tags, though preferably I would be able to have the effect no matter where the user moused over the containing table-cell.

    I'm pretty sure I can just add both pieces of text (default, onmouseover) and use JavaScript to alter the visibility states but I was wondering if there's a purer solution where I could directly remove and substitute text instead of creating a messy illusion. And yes, a non-IE or JavaScript-only solution is viable here since this mouseover information isn't integral content and I'm designing with Firefox in mind anyway.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's the simplest cross-browser way to do that.
    Code:
    <td onmouseover="this.innerHTML='Hitsugaya Toushirou';" 
    onmouseout="this.innerHTML='Hitsugaya Tōshirō';"
    >Hitsugaya Tōshirō</td>
    Why are you using XHTML 1.1?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Ah, tested in three browsers and it works perfectly. :p

    I tried using document.write, doing a value change, and looking around Google with no results. Still a JavaScript newbie, lol.

    As for XHTML 1.1, I'm using it mainly just because I feel like it. I was using XHTML 1.0 then switched over. No differences that I notice except deprecated tags don't validate so it doesn't seem to be hurting anything and it keeps me standards-compliant and learning new techniques in those few cases when I do need to find a workaround. ;)

    Anyway, guess I need to set some widths now so my table isn't moving around, heh.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,316
    Thanks
    29
    Thanked 280 Times in 274 Posts
    Yes, I'm well aware of this but without controlling my own server or having a way to render XHTML locally on my PC I have no way test my page as true XHTML. Further, since I'm not using the special abilities of XHTML like the ability to work with MathML, XML, and XSLT (I don't even know what the last one is), I see no real point in doing so until Internet Explorer supports it. This kind of changed my mind on the issue:

    Quote Originally Posted by Mozilla Web Author's FAQ
    http://www.mozilla.org/docs/web-developer/faq.html#accept

    According to the Accept header, Mozilla prefers application/xhtml+xml over text/html. Should I serve application/xhtml+xml to Mozilla?


    The preference for application/xhtml+xml was added to the Accept header in order to enable the serving of MathML to both Mozilla and IE with Apache without scripting back when the MathPlayer plug-in for IE did not handle application/xhtml+xml.

    If your document mixes MathML with XHTML, you should use application/xhtml+xml.

    If you’re developing XHTML Basic content for mobile devices and are serving it as application/xhtml+xml, you can serve it as application/xhtml+xml to Mozilla as well without taking special steps (except perhaps providing a different style sheet for the handheld and screen media).

    However, if you are using the usual HTML features (no MathML) and are serving your content as text/html to other browsers, there is no need to serve application/xhtml+xml to Mozilla. In fact, doing so would deprive the Mozilla users of incremental display, because incremental loading of XML documents has not been implemented yet. Serving valid HTML 4.01 as text/html ensures the widest browser and search engine support.

    There is a fad of serving text/html to IE but serving the same markup with no added value as application/xhtml+xml to Mozilla. This is usually done without a mechanism that would ensure the well-formedness of the served documents. Mechanisms that ensure well-formed output include serializing from a document tree object model (eg. DOM) and XSLT transformations that do not disable output escaping. When XHTML output has been retrofitted to a content management system that was not designed for XML from the ground up, the system usually ends up discriminating Mozilla users by serving tag soup labeled as XML to Mozilla (leading to a parse error) and serving the same soup labeled as tag soup to IE (not leading to a parse error).
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's referring to XHTML 1.0, which can be served as text/html if it conforms to the compatibility guidelines.

    You should use either XHTML 1.0 Strict or HTML 4.01 Strict.

    XSLT
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

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