李明哲老師多媒體互動寫作教學: 移動滑鼠就跳出圖．文．說明框

COOL！

把滑鼠移進來看看我！

移動滑鼠就跳出圖．文．說明框：
對要再進一步說明的地方加強敘述。

　實例示範

這是大陸福州市最有名的景點：三坊七巷。我因公出差，順道去逛了一下。當然也就拍了不少影像。就以所拍影像為例，和這地圖配合起來，來呈現一下我所要教的這個互動功能，所能展示的互動性文本特色！

閩都神韵：三坊七巷

三坊七巷起於晉，完善於唐、五代，至明清鼎盛。古老的坊巷格局至今基本保留完善，是中國都市僅存的一塊「里坊制度活化石」。

這裡一直是「閩都名人的聚居地」，林則徐、沈葆禎、嚴復等中國近代史史有影響力的人、皆出自於此。

巷弄之間游走

依稀殘留的畫面

我最喜歡的地點

林則徐祠堂

上面【巷弄之間游走

】的完整語法：

巷弄之間游走<img onmouseout="UnTip()"
style="border: 0px solid ; width: 48px; height: 48px;"
onmouseover="TagToTip('ccc01', BALLOON, false, ABOVE, true, STICKY, true, CLOSEBTN,true)"
alt=""
src="http://cdn1.iconfinder.com/data/icons/plump-by-zerode_/128/Camera-icon.png"
align="middle">

一下子看不懂，沒關係，下面我會完整的教清楚。這給同學學習參考之用。

　WZ_tooltip 套裝語法使用方法

請先 copy 下列 javascript 的語法程式，置入於<body>之後：

若是要為文字、圖片添加滑鼠移入式的「純文字」說明，如下範例，請使用下列語法使用方式。

般若三經

【般若三經】的文字說明語法：

<a onmouseout="UnTip()"
onmouseover="Tip('般若波羅密多心經<br>金剛般若波羅密經<br>六祖大師法寶壇經<br> ', BALLOON, true, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '14px')"
href="javascript: void(0)"><big style="font-weight: bold;">般若三經</big></a>

影音教學 with KompoZer：

的文字說明語法：

<img
onmouseout="UnTip()" style="width: 32px; height: 32px;"
onmouseover="Tip('這一個文字式的說明，<br>可以看到呈現格式和左邊不同。<br>只要更動一下語法的設定值即可。<br>很簡單的！<br>', BALLOON, false, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '16px')"
alt=""
src="http://cdn3.iconfinder.com/data/icons/greenpack/PNG/128x128/icontexto-green-01.png">

影音教學 with KompoZer：

PLUS## 圖文式的說明語法：

沈靜的凝望

語法：

<a onmouseout="UnTip()"
onmouseover="Tip('這是被放在角落的菩蕯。<br>凝望，是一種無心的堅持。<br>我常看著，想著時間的流逝。<br> <img width=240 src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgotZzAZpX5lm4Gg3EzBSNlpLUx9Xz_SjIIJxCXc4c_4DCQMwlDB3ccE-plEuQX5hLvKlvU_tAOHAYHPqj7I54LgiBMdLuTdXNOXA6XFt4B4CpVweAt74MmR7D6RoD8HDhIgPZZW5wLlVY/w1202-h802-no/IMG_4926.JPG>', BALLOON, false, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '16px')"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgotZzAZpX5lm4Gg3EzBSNlpLUx9Xz_SjIIJxCXc4c_4DCQMwlDB3ccE-plEuQX5hLvKlvU_tAOHAYHPqj7I54LgiBMdLuTdXNOXA6XFt4B4CpVweAt74MmR7D6RoD8HDhIgPZZW5wLlVY/ -h802-no/IMG_4926.JPG">沈靜的凝望</a>

影音教學：

為文字、圖像添加影音、 image gallery或圖文整合式的說明，如上面三坊七巷的實例示範。這一部分需要二個步驟：

1. 先用表格做一個影音說明，如下列，再將表格的 id="xxx" 命名，以供後續語法使用，此例表格的 id="ddd01" 。

按此看表格語法

2. 【林則徐祠堂

】這一影像式說明中，對照片寫入語法使上面先做好的影音表格被改置到說明框中（在瀏覽器頁面中，上面的表格會自動的隱藏）。語法如下：

林則徐祠堂<img onmouseout="UnTip()"
style="border: 0px solid ; width: 48px; height: 48px;"
onmouseover="TagToTip('ddd01', BALLOON, false, ABOVE, true, STICKY, true, CLOSEBTN,true, SHADOW, true)"
alt=""
src="http://cdn1.iconfinder.com/data/icons/plump-by-zerode_/128/Camera-icon.png"
align="middle">