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">
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>之後:
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/wz_tooltip/wz_tooltip.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tip_balloon/tip_balloon.js"></script>
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/wz_tooltip/wz_tooltip.js"></script>
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tip_balloon/tip_balloon.js"></script>
若是要為文字、圖片添加滑鼠移入式的「 純文字」說明,如下範例,請使用下列語法使用方式。
般若三經
【般若三經】的文字說明語法:
<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:onmouseover="Tip('般若波羅密多心經<br>金剛般若波羅密經<br>六祖大師法寶壇經<br> ', BALLOON, true, ABOVE, true, FONTFACE, '微軟正黑體', FONTSIZE, '14px')"
href="javascript: void(0)"><big style="font-weight: bold;">般若三經</big></a>
的文字說明語法:
<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: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">
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>
影音教學: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">
注意事項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">
上例表格中的id="ddd01"(紅色字部分),要對到TagToTip('ddd01',這兩個部分要相同,才能讓效果出來。
影音教學 with KompoZer:
使用影音說明框來進一步解釋文 本。 |
沒有留言:
張貼留言