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

2013年6月2日 星期日

圖像上互動的 overlay 文字:當紅的圖文整合形式之一


Image Hover Caption
把更多的說明文字擠入圖像中

圖像上的 overlay 文字


福山植物園的夏。▽

初春走訪福山園後的夏日再訪…▲
四月一日那天,陰天的天氣。福山植物園開放的第一天。
我到了福山。
心中就一直念念不忘的告訴自己,夏天時,一定要再來看一次。
我想像著大熱天中,山上的蟬聲和微微風動,那時福山植物園肯定是一整個全身感官的交響樂。


1 教學內容

1.寫入 javascript 語法,請 copy 下列到<head>xxx</head>或貼入<body>之後。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://lmcdwriting.org/userfiles/lmcsilver20121007/jCapSlide/jquery.capSlide.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://lmcdwriting.org/userfiles/lmcsilver20121007/jCapSlide/css/style.css" media="screen">
*注意:紅色字的那條碼,很多互動程式套件都有用到,如 content slider 也有使用到。如果你有用到多個互動程式套件,只要用一次即可。不然會出現有些可用,有些不行的現象。

2. Overlay 內容語法。

<div id="capslide_img_cont01" class="ic_container">
 <img
src="https://lh3.googleusercontent.com/-EUF6wVTbsmA/UbpjhkznnfI/AAAAAAAAK1o/rPT-G8Aesuc/w1082-h722-no/IMG_7102.JPG"
alt="" height="280" width="420">
<div class="ic_caption" style="padding-top: 5px;">
<p class="ic_category" style="font-family: 微軟正黑體; font-size: 0.85em;">這是一開始會浮在照片上的標題↑</p>
<p class="ic_text"> 這是 overlay 跑出來後,更多的說明文字。如果要對照片有更多互動式的說明,請在這裡寫入想要說明的文字。</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#capslide_img_cont01").capslide({
caption_color : 'white',
caption_bgcolor : 'black',
overlay_bgcolor : 'black',
border : '',
showcaption : true
});
});
</script>
語法說明:
  1. 步驟二的這組語法,只能跑出一個互動元素。
  2. 如要做第二個互動元素,請再複製步驟二一次,但要更改 id ,即藍色字體者(二處)。例如把本例 capslide_img_cont01  改成 capslide_img_cont02 即可。但注意,二處藍色字者同時都要改。


3.上例語法範例。


這是 一開始會浮在照片上的標題↑
這是 overlay 跑出來後,更多的說明文字。如果要對照片有更多互動式的說明,請在這裡寫入想要說明的文字。


4.教學影音。




資料來源 jCapSlide



2 則留言:

  1. 請問用到Dreamweaver上
    方法也是一樣嗎
    我的圖片和文字會跑掉

    我把問題圖片縮成網址~
    http://ppt.cc/2gz-

    回覆刪除
  2. 應該是一樣的。
    但在Dreamweaver預視是會跑掉的,你要存檔後從瀏覽器再看,效果才會出來。

    回覆刪除