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

2014年5月13日 星期二

超好用的image hover:全新改寫:使用KompoZer





沈思是一種無比的重要!
但沈思更重要的是放空自己。
人其實沒有多少勇氣,
可以來面對腦袋空空的感覺。
貓,
不知在想什麼?
一、在所欲編輯之處以KompoZer編輯所要之內容:

  1. 本範例使用kompoZer進行內容編輯講解;如理解方法後也可以使用其他網頁編輯軟體。
  2. 發想:先做一個表格,表格內插入圖像,圖像後再插入div文字區塊,再用CSS及jquery來產生變化、互動。
  3. KompoZer下載處KompoZer基本操作使用KompoZer的四個基本動作

二、請於<body>之後置入調整文字框的CSS:

<style>
#ta2014050901 >tbody >tr >td {
position: relative;
}
#ta2014050901 >tbody >tr >td >div {
position: absolute;
top: 0px;
left: 0px;
padding: 1em;
color: white;
background-color: rgba(107,107,107,0.7);
font-size:0.94em;
font-family: 微軟正黑體;
line-height: 150%;
}
</style>

三、請於<body>之後置入產生互動的jQuery程式碼:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#ta2014050901 >tbody >tr >td >div").hide();
$("#ta2014050901").hover(function() {
$(this).find(">tbody >tr >td >div").stop().fadeIn(200);
},
function() {
$(this).find(">tbody >tr >td >div").stop().fadeOut(200);
});
});
</script>

四、注意事項:
  1. 此模組只能產生一個互動變化單位,若要使用第二單位,重覆1-3步驟,一定要記得第一步驟須重設表格內的 id ,並同時更改步驟二、三 內的所有的id參數,即上面的紅色字部分。
  2. 可以更動文字框出現及隱藏的速度,此例為200(一秒是1000),即綠色字部分。
  3. 藍色字部分是文字框壓在圖 像上的位置,請參考教學影音來更改。
  4. 暗黃字部分是透明背景色的調 整,也請參考教學影音。
  5. 色碼表轉換網站,按此


沒有留言:

張貼留言