おもしろタグ - 読み方3変化/ホームページマスター

https://hmaster.net/

HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する方法を分かりやすく解説しているサイトです。初心者向けに見やすい、読みやすい作りになっています。

読み方3変化

向日葵の漢字の近くにマウスをポイントするとひらがなで「ひまわり」と振り仮名が表示されます。　そして次にそのままクリックするとカタカナの読みに変わります。そしてマウスを漢字の場所から離すと3秒後に英語で「himawari」という読み方が表示されます。

*<ruby>～<rt>～</rt></ruby>はHTML5用のタグです。
・漢字の上に直接マウスを乗せると3段階変化しませんので漢字から数㎝離して上記の手順を踏んでください。テーブル内でこの下向き矢印の位置辺りでマウスを載せる→　⇩

最後にマウスを離すときは下の紫の枠のテーブルの外側へ離して下さい。

向日葵

ソース


<div style="font-size:60px;" id="a"
onMouseOver="this.innerHTML='<ruby>向日葵<rt>ひまわり</rt></ruby>'"
onclick="this.innerHTML='<ruby>向日葵<rt>ヒマワリ</rt></ruby>'"
onmouseout="setTimeout(function() { a.innerHTML ='<ruby>向日葵<rt>himawari</rt></ruby>'}, 3000)">

向日葵

</div>

おもしろタグに戻る

Follow @hp_master_2003