李明哲老師多媒體互動寫作教學: 快速移動圖片的排版+互動功能

2014年4月29日星期二

快速移動圖片的排版+互動功能

如果數位文本的寫作，
是一種需要想像力的創作過程；
那麼，
在空間的強烈位移和變動，
是激發想像力的一種形式。
想像力，不是和一般知性式知識對立的認知形式，
相反的是一種綜合，
根據美學理論而言。

透過CSS語法的安排
我們可以隨心所欲的把圖像置放到版面任何地方
尤其是置放去背圖像
可以強烈的將訴求主題凸顯出來創造文本意圖
當然有時這種圖像移動有時難免會把寫好的文本蓋住
沒關係
可以利用互動語法
click一下可以暫時讓圖像消失讀者便可觀看完整文本
我們可以調整多少時間後圖像可以再度出現

一、請在欲編輯地方寫人文稿並於文稿下置入圖片：

1.很簡單的寫作編輯動作，請看影音教學。
2.裡面還有一些非常有用的小技巧。
3.圖片請一定要記得設 id 。

二、請在<head>xxx</head>之間或<body>之後置入CSS來移動圖片：

<style>
#pic20140428 {
position: relative;
top: -280px;
left: -10px;
margin-bottom: -280px;
}
</style>

三、請在<head>xxx</head>之間或<body>之後置入互動程式碼：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(function() {
$("#pic20140428").click(function() {
$(this).animate({opacity: "0.1"}, 200).delay(6000).animate({opacity: "1"}, 200);
});
});
</script>

四、注意事項：

紅色字的部分請一定要和照片，即<img id="xxx" >，的相同。這樣才能控制圖片啊！
圖像消失後要多少以後才再出現，是第 3 部分的藍色字部分，即 delay(6000) ，以千分之一秒為單位，6000即是6秒後再出現。

李明哲老師多媒體互動寫作教學

2014年4月29日星期二

快速移動圖片的排版+互動功能

沒有留言:

張貼留言

2014年4月29日 星期二

快速移動圖片的排版+互動功能

沒有留言:

張貼留言

2014年4月29日星期二