Attention & Click ↓
影音、圖像，隨按隨出
除非是某些特定的影片，例如院線電影、熱門電影等等。網路上的影音往往不宜太長，以我個人上課的要求，60秒是最後的底線。
因之把長影音打散成數支短影音，或是甘脆直接拍成很多支短影音，再讓讀者自行去選擇要看那一支，是重要的網路影音排版原則。
那麼，按一下某文字就在特定編輯區域跑出影音、圖像，就是重要的多媒體互動寫作技能。
因之把長影音打散成數支短影音，或是甘脆直接拍成很多支短影音，再讓讀者自行去選擇要看那一支，是重要的網路影音排版原則。
那麼，按一下某文字就在特定編輯區域跑出影音、圖像，就是重要的多媒體互動寫作技能。
範例 1：按字就可以換影音
愈來愈多的場合，透過各式螢幕的展現，多媒材並置的數位文本呈現形式已成主流。隨便逛逛，都可在各種場合看到這種新文本形式：
★ 馬告國家公園內的螢幕閱讀形式【video ↓】
★ 國家音樂廳內的螢幕閱讀形式【video ↓】
★ 桃 園機場內的螢幕閱讀形式【video ↓】
★ 馬告國家公園內的螢幕閱讀形式【video ↓】
★ 國家音樂廳內的螢幕閱讀形式【video ↓】
★ 桃 園機場內的螢幕閱讀形式【video ↓】
語法
jquery程式，請放在<head>xxx</head>之間或<body>之後：
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script>
要按下去互動的文字部分：
$('#a001').attr( 'src', '影片網址');
影音部分：
<iframe width="560" height="315"
src="https://www.youtube.com/embed/bGo1qGATfn4?rel=0" frameborder="0"
allowfullscreen></iframe>
一、請記得為影音設上id。本例為 a001 ，「#」字號不用寫入哦。
二、紅色字部分是影音的網址，請在youtube 分享／嵌入內找到。
一、請記得為影音設上id。本例為 a001 ，「#」字號不用寫入哦。
二、紅色字部分是影音的網址，請在youtube 分享／嵌入內找到。
範例 2：按字就可以換照片內容
馬告國家公園【gallery ↗】
人們最耳熟的大概是棲蘭【＾】及明池【＾】。但，馬告的美就不僅是只於此而已，森林中的光影，沈穩的綠意，樹本的線條，花朵的顏色……。這些都讓人的思緒銳利於對大自然的驚奇。
驚奇是重要的！這讓人對活生生的日子才能有活生生的感動。感動是人趨向於藝術的最大動力。
人們最耳熟的大概是棲蘭【＾】及明池【＾】。但，馬告的美就不僅是只於此而已，森林中的光影，沈穩的綠意，樹本的線條，花朵的顏色……。這些都讓人的思緒銳利於對大自然的驚奇。
驚奇是重要的！這讓人對活生生的日子才能有活生生的感動。感動是人趨向於藝術的最大動力。
語法
jquery程式，請放在<head>xxx</head>之間或<body>之後：
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script>
互動文字部分語法：
$('#b002').attr( 'src', '照片網址');
像片語法：
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm7ZNKM1M3jKI2Eh1TDD2CYOmRaqGtYTl0ma3OOHi5_JOCyiTNvpBft7Ozor2n7ohm42Md3RJug87uHnVFhd6FJ4u9ojZWe6K4icQhgL1GIR6mxrfPwacrJ_7dbTLRnG4bg3f3h0yqhKQ/w1159-h773-no/IMG_9305.JPG" style="width: 540px;" />
HTML語法：
森林中的<span onclick=" $('#b002').attr( 'src', '新照片網址'); " >光影</span>，沈穩……
<img id="b002" src="原照片網址" style="width: 540px;" />
jQuery UI 進階：照片表現出互動變化樣態
呈現範例：<img id="b003" xxx>，按我復原
請在< head>xxx</head>間寫入下列程式碼：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
在「互動文字部分語法」 這地方，增加程式選項，如下紅字：
$('#b003').attr( 'src', '照片網址').effect('fade', {easing: 'linear'}, 600);
互動時，照片就會以 fade 的形式來呈現互動。請按這裡看變化。
如果想看文字部分的語法，請 按此看語法。
也可以再改寫成bounce 這種互動樣態，語法如下：
$('#b003').attr( 'src', '照片網址').effect('bounce', {distance: 10, easing: 'linear'}, 600);
互動時，照片就會以 bounce 的形式來呈現互動。請按這裡看變化。
沒有留言:
張貼留言