數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2013年5月11日 星期六

移動滑鼠就跳出圖.文.說明框

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>之後:

<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>

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

                    般若三經                            

【般若三經】的文字說明語法:
<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"
按此看表格語法
<table id="ddd01" style="text-align: left; width: 431px; height: 331px;"
border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;"><iframe
src="http://www.youtube.com/embed/LM3IjJh31Jc?rel=0" allowfullscreen=""
frameborder="0" height="315" width="420"></iframe><br>
</td>
</tr>
</tbody>
</table>

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">
注意事項
上例表格中的id="ddd01"(紅色字部分),要對到TagToTip('ddd01',這兩個部分要相同,才能讓效果出來。

影音教學 with KompoZer:

使用影音說明框來進一步解釋文 本。






沒有留言:

張貼留言