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

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


沒有留言:

張貼留言