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

2015年7月2日 星期四

tooltips (三):按一下,即可快速跳出小型影音





補充文字說明!

按一下,即可快速跳出小型影音。





數位文本,會利用各種可能的媒材,讓讀者獲得最佳的理解之可能。例如要介 紹一個地方特色,本例南 投水里,一段小小影音的補充說明, 可以讓讀者有著更豐富的理解。這個例子,就是使用click互動,跳出小型影音的補充說明。



jQuery程式碼,請置 於<body>之後:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css"
href="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/css/tooltipster.css">
<script type="text/javascript"
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/tooltipster-master/js/jquery.tooltipster.min.js"></script>

**特別說明:
jquery-1.9.1.js這一條程式碼,上例暗紅色字體者。如使用其他互動模組時,已被寫入,則可省略。一般而言,這條程式碼一篇文章中有一次出現即可。請保留最早出現的那次。

本例驅動程式語法碼,請置 於<body>之後:

<script>
$(document).ready(function() {
$('#id0702').tooltipster({
content: $('<iframe width="320" height="180" src="https://www.youtube.com/embed/4q58G5Z1KHI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br><strong>水里蛇窑的一日遊。</strong>'),
interactive: true,
position: 'left',
offsetX:-180,
offsetY: 30,
trigger: 'click'
});
});
</script>

說明:
一、紅色字為youtube影音的嵌入碼,請參考影音教學。
二、綠色字為影音下方文字說明。
三、設定tooltips出現的位置以及位移的量(正、負數字)。 藍色字體者。
四、位置有八種:right, left, top, top-right, top-left, bottom, bottom-right, bottom-left 。
五、要按下去的媒材元件,記得要設id,本例為 id0702,暗紅色字體者



影音教學:




沒有留言:

張貼留言