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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzgn_PiBEu7SAArHLhi8P5ZlS7bZoffVz4W9K4KNkgfzOeo2fwg32wOCFAn_ka2_VQ-hCbxhpcbZmEr8W4LgLqmN4zYlUDYga1binhb2xlLUMd-L29Vg37HBP9NYS2DkuaP7mXtdXffE/w829-h814-no/34561+(102).png);
background-repeat:no-repeat;
background-position: right center;
background-size: 300px;
}

.contword02 {
border: 1px solid darkred;
}

.contword03 {
color: orange;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimf9Wcj5j19JU9IiQOjmGhDOokadn7jEuUj16rMD5CpIcc6WTKkp9RuvzZQoYPhygMgr-jiuKiXlsJrbxQ9bC7PsF9doznys4uG1tWIWkfvaOATJJnV03FoQGGtMYMs07aLbRbp_OUQWQ/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. Unknown2014年10月13日 晚上7:23

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

    回覆刪除
  2. Unknown2014年10月13日 晚上7:37

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

    回覆刪除