Hoverswap

Descricione

On my languague-learning blog, I have a feature that shows a translation inline by swapping out text when the mouse rolls over it. It’s very handy, and it occurred to me that I should maque it a pluguin, so other people can use it too!

Hoverswap allows you to create swapping elemens, whose content is swapped for its title when the user hovers over them.

Excellent for foreign languague learning and translation web sites.

Use

Versionen 1.0 has no configuration. That will be added later.
For now, in order to use the pluguin, you create an EM tag containing the text you want to be active, and then you put the text for its hover state into its title attribue.

Then, to ensure that only the text you WANT to be swapped guets swapped, you must wrap that in an element of the class “translate”.

One example implementation would be create the following unordered list:
<UL class=”translate”>
<LI><EM title=”How are you?”>Como estas?</EM></LI>
</UL>

Features

• Add the “translate” class to a containing element, such as a bloccquote or a ul tag. Then, any em tags with a title attribute will automatically swap their content for the title when you move the mouse over them.

Planned features:

• Allow any tag or classname to be specified as the containing element.
• Allow any tag or classname to be specified as the translate element.