補充文字說明！
按一下，即可快速跳出小型影音。
數位文本，會利用各種可能的媒材，讓讀者獲得最佳的理解之可能。例如要介
紹一個地方特色，本例南
投水里，一段小小影音的補充說明，
可以讓讀者有著更豐富的理解。這個例子，就是使用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&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，暗紅色字體者。
<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&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，暗紅色字體者。
影音教學：
沒有留言:
張貼留言