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. 色碼表轉換網站，按此。

沒有留言:

張貼留言