*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

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 在影片有超連結按鈕 做法不知老師可有錄製幻燈片及+超連結+影片 數位文本可傳授愚夫
    以上墾請 大愛教授! 僅 致 分享快樂!

    回覆刪除
    回覆
    1. 有的,我找個時間來試看看

      刪除