Image Hover Caption
把更多的說明文字擠入圖像中
福山植物園的夏。▽
|
初春走訪福山園後的夏日再訪…▲
四月一日那天，陰天的天氣。福山植物園開放的第一天。
我到了福山。
心中就一直念念不忘的告訴自己，夏天時，一定要再來看一次。
我想像著大熱天中，山上的蟬聲和微微風動，那時福山植物園肯定是一整個全身感官的交響樂。
我到了福山。
心中就一直念念不忘的告訴自己，夏天時，一定要再來看一次。
我想像著大熱天中，山上的蟬聲和微微風動，那時福山植物園肯定是一整個全身感官的交響樂。
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 也有使用到。如果你有用到多個互動程式套件，只要用一次即可。不然會出現有些可用，有些不行的現象。<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">
2. Overlay 內容語法。
<div id="capslide_img_cont01" class="ic_container">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzvbvsKdvuSqzkCiI3soyL-Mdy9ubozMQWj9TPR4DKFC-mPhd6PwS8uljduO_Wbu822PblAe6GQi5v9P7U_Ag4elLDz0PKk5gXQdn60gmin-j-FZk-CLeiMgGNyd8fReBd4xdQhLQMNA4/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>
語法說明：<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzvbvsKdvuSqzkCiI3soyL-Mdy9ubozMQWj9TPR4DKFC-mPhd6PwS8uljduO_Wbu822PblAe6GQi5v9P7U_Ag4elLDz0PKk5gXQdn60gmin-j-FZk-CLeiMgGNyd8fReBd4xdQhLQMNA4/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>
- 步驟二的這組語法，只能跑出一個互動元素。
- 如要做第二個互動元素，請再複製步驟二一次，但要更改 id ，即藍色字體者（二處）。例如把本例
capslide_img_cont01
改成 capslide_img_cont02 即可。但注意，二處藍色字者同時都要改。
3.上例語法範例。
這是
一開始會浮在照片上的標題↑
這是 overlay
跑出來後，更多的說明文字。如果要對照片有更多互動式的說明，請在這裡寫入想要說明的文字。
4.教學影音。
資料來源 jCapSlide 。
請問用到Dreamweaver上
回覆刪除方法也是一樣嗎
我的圖片和文字會跑掉
我把問題圖片縮成網址~
http://ppt.cc/2gz-
應該是一樣的。
回覆刪除但在Dreamweaver預視是會跑掉的，你要存檔後從瀏覽器再看，效果才會出來。