A different type of mouse over, image displayed on text roll over Options

[Midnight Kat]

I am wanting do a mouse over effect such that when a link is moused over it switches the text to Japanese. Now, because most people do not have Japanese installed on their comps the text wouldn't show up and the effect is screwed. Therefore, I have opted to display an image instead. I am not sure how to do it so that an image is displayed on a text mouse over.

[Brian Chandler]

I am wanting do a mouse over effect such that when a link is moused over it switches the text to Japanese. Now, because most people do not have Japanese installed on their comps the text wouldn't show up

Is this true? Have you tested it somehow? Last time I asked here, there did not seem to be anyone unable to view Japanese text...

[Midnight Kat]

Is this true? Have you tested it somehow? Last time I asked here, there did not seem to be anyone unable to view Japanese text...

Unless one has the foreign font install on their computer, it will only display the unknown square character.

Does this display on your comp: これは日本語です。

[Darin McGrew]

Does this display on your comp: これは日本語です。

It displays for me. I have no idea what it means, but it displays...

[pandy]

Does not display for me on XP. I think I can read (well) Japanese on my 2K computer. AFAIK I haven't installed any extra language support on any of the computers, but I guess I might have on the 2K one.

[Christian J]

Also displays on Vista.

[Midnight Kat]

Well, regardless. Does anyone know how to do a mouse over such that it changes to Japanese?

[Christian J]

Well, regardless. Does anyone know how to do a mouse over such that it changes to Japanese?

Shouldn't be too hard, but how to do it well way may depend on the context. E.g., is it an occasional word in a text paragraph, or a dictionary-style list/table of English-Japanese words? Is it links to another (Japanese?) site? Is the Japanese text important enough that it must work even without javascript/CSS? More info, please!

[Midnight Kat]

Shouldn't be too hard, but how to do it well way may depend on the context. E.g., is it an occasional word in a text paragraph, or a dictionary-style list/table of English-Japanese words? Is it links to another (Japanese?) site? Is the Japanese text important enough that it must work even without javascript/CSS? More info, please!

Context: The mouse over is for the links in my site's menu. Example: when you mouse over "HOME" the text switches to "ホーム"; "LINKS" becomes "リンクス"; etc. No dictionary shenanigans, tables, or linking to Japanese sites. This is all just cosmetic; but ties into the style of the website.

[Christian J]

With this HTML:

CODE

<div id="nav">
<a href=""><span class="en">HOME</span> <span class="jp">ホーム</span></a>
<a href=""><span class="en">LINKS</span> <span class="jp">リンクス</span></a>
</div>

you can do it with CSS alone:

CODE

#nav a span.jp {display: none;}
#nav a:hover span.jp {display: inline;}
#nav a:hover span.en {display: none;}

The above should work in IE6, if not perhaps a small bugfix is required, IIRC something like this might work:

CODE

a:hover {position: relative;}

------

(Edit: removed an earlier, unnecessarily complicated solution)

This post has been edited by Christian J: Mar 19 2009, 06:43 PM