記事に貼った画像に喋らせる

HTML

　誤解のないように先に言っておきますが、音声は出ません。

オンマウスで吹き出しを出す

title属性の使い方

画像に使う

　画像のあたりへマウスを移動させてみてください。

HTML

<p title="ふわふわしっぽ帽子をかぶった女の子"><img  src="画像のURL"></p>

　画像の説明をツールチップとして出しています。

テキストに使う

　「ツールチップ」の文字の上にカーソルを載せてみてください。

HTML

<span title="吹き出し">ツールチップ</span>

　日本語の意味が表示されます。

abbr要素に使う

　略語であることを示すabbr要素のフルスペルを提示するのに使います。

※フルスペルは、和製英語。英語では、Full form。

HTML

<p><abbr title="HyperText Markup Language">HTML </abbr></p>

表  示

HTML 

吹き出しは2行も可

HTML

<p><abbr title="CSSは、
Cascading Style Sheetsの略語です。">CSS</abbr></p>

表  示

CSS

オリジナルのツールチップ

「油で揚げた薄切りジャガイモ」

　次の記事で扱います。