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

2014年10月6日 星期一

移動滑鼠,編輯元素產生變化:jquery addclass / removeclass



請把滑鼠移到這裡來,下面 區塊會加框線。



這裡是文本寫作的區塊,可以透過互動強調作者想表達的想法。

當滑鼠移到這個區塊時,(一)這個區塊的文字會變 顏色,(二)同時背景圖也會換掉。




一、影音教學:




寫作發想:
  1. 請先寫入編輯元素。
  2. 為每個編輯元素設定 class 以及 id 。
  3. class 是媒材呈現的樣貌;id 是互動控制所需的辨識碼。
  4. 最後再寫入 jQuery 程式碼,請注意程式中所設的 id 。
二、請把下列 CSS 複製到<body>之後:
<style type="text/css">
.titlemid01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
letter-spacing: 0.1em;
border-bottom: 1px solid darkorange;
}

.contword01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
letter-spacing: 0.1em;
padding-right: 55%;
background-image: url(https://lh4.googleusercontent.com/-KuKFR5LQMq0/UqHeCoWFxSI/AAAAAAAAQNo/BfumwLGH8k8/w829-h814-no/34561%2B%28102%29.png);
background-repeat:no-repeat;
background-position: right center;
background-size: 300px;
}

.contword02 {
border: 1px solid darkred;
}

.contword03 {
color: orange;
background-image: url(https://lh3.googleusercontent.com/-vnG3PMO07w0/UqBpLSboe3I/AAAAAAAAQKY/8m3xNB8SdbA/s256-no/256px-Information_green.svg.png);
}
</style>
三、請把下列 jQuery 語法複製到<body>之後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
$(document).ready(function () {
$("#a01").hover(function () {
$("#a02").addClass("contword02");
}, function () {
$("#a02").removeClass("contword02");
});
});
</script>

<script>
$(document).ready(function () {
$("#a02").hover(function () {
$("#a02").addClass("contword03");
}, function () {
$("#a02").removeClass("contword03");
});
});
</script>


注意事項:
  1. 1.9.1.js 那條程式(橘色字體者), 如已因使用其他互動功能而被使用了,可以不要再寫入。一篇互動數位文章中,寫入一條即可。請保留最早出現的那條。



3 則留言:

  1. 李老師鈞鑒: 愚夫.今日見youtobe 【OLAY催淚短片】我和媽媽一點都不像(所有女孩必看!) https://plus.google.com/u/0/photos/109151098412404168298/albums/6069641998525654129
    這是橫幅幻燈片+超連結+youtobe+翻譯+社群留言 愚認為尚可加入skybe
    line g+ facebook粉絲按讚 line + email+seo

    回覆刪除
  2. 以上也有影片上傳youtobe 在影片有超連結按鈕 做法不知老師可有錄製幻燈片及+超連結+影片 數位文本可傳授愚夫
    以上墾請 大愛教授! 僅 致 分享快樂!

    回覆刪除