View Full Version : Text Rollover

04-22-2006, 05:34 AM
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?

04-22-2006, 06:55 AM
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.

04-22-2006, 07:29 AM
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.

04-22-2006, 07:56 AM
Here's the simplest cross-browser way to do that.

<td onmouseover="this.innerHTML='Hitsugaya Toushirou';"
onmouseout="this.innerHTML='Hitsugaya Tōshirō';"
>Hitsugaya Tōshirō</td>

Why are you using XHTML 1.1?

04-22-2006, 11:26 AM
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.

04-22-2006, 11:57 PM
Read this: http://developer.mozilla.org/en/docs/DOM:document.write#Notes

You should be aware that text/html should not be used with XHTML 1.1; use application/xhtml+xml instead.
Sending XHTML as text/html Considered Harmful (http://www.hixie.ch/advocacy/xhtml)
Serving up XHTML with the correct MIME type (http://keystonewebsites.com/articles/mime_type.php)
Content-Typing XHTML (http://www.greytower.net/archive/articles/xhtmlcontent.html)

04-23-2006, 03:55 AM
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:


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).

04-23-2006, 05:31 AM
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 (http://www.w3.org/TR/xslt)