滑鼠移到文字或圖片上，跑出說明文字

title="說明性文字"

請把滑鼠移到我

多媒體文本寫作，寫作元素之間互動性， 是寫作者要常放在心上的。 互動性，並不只是好玩而已，那真的不是 挺重要的。而是透過寫作元素的互動， 讓資訊的呈現更為豐富。這才是「心法」。 這是因為螢幕閱讀的時代來了。

這次我們要處理，把滑鼠移到某一文字或圖片，會跑出更多的說明性文字。 這是常用的技法，也是基礎性的互動文本練習，即一般所說的 tooltips 功能。這一語法就是 title="xxx" 。

文字互動說明的語法：

<span title="世新新聞系多媒體新聞授課老師">李明哲</span>

結果：

李明哲

說明：
我們可以看到，在「李明哲」這三個字的前後有加上語法。
<span title="xx">李明哲</span>。
這樣，滑鼠移到這三個字時，就會跑出說明文字。

圖片說明性文字的語法：

<img title="夏天的花朵等待著陽光" src="http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg" width="320" />

結果：


說明：
同樣的，在<img src="xx"/>的裡面，加上相同的語法 title="xxx"，
當滑鼠移到圖片時，就會有說明性文字跑出來。<img src="xx"/>這還記得嗎？
這是嵌入圖片的語法。

好了，有同學會想問：

Q：如果說明文字很長，我想段行，那要如何來處理呢？
A：這也很簡單，請看下面說明：


也就是，在title 裡面寫文字時，你也直接按下 enter 來分行，這樣就可以形成斷行的文字呈現樣態。

補充說明：

title="xxx" 這一語法可以和許多 html 或是 css 語法相互配合。除了文字和圖片語法外，例如<div title="xxx"...>，<a href="xxx" title="xxx" ... >，<embed title="xxx" ... > 亦可。

超快速上手：使用kompozer

更多有趣、好看的tooltips式的互動補充說明做法：

一、請參考Hint.css（滑鼠請移入）。

二、請參考Tooltipster（滑鼠請移入）。

---