2013年6月17日 星期一

隨心所欲移動編輯物件




愛移到那裡就到那裡！
為什麼要移動編輯物件？因為常碰到以下狀況▽：


教學範例：#1

1. 範例圖示。


2. 範例語法。
<img style="width: 520px; height: 390px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGr88QCJQKxhlqIAVIv1aLyxpKf9TTsdPqRsy_tKPBMB5qVCK65DEjBgIoIQy6OqQs-B5ZYN6j5kVkFpqA2Y2sg2mCANwyxPb10Oa4LIIx9LUFpFlhwGNoRoWjuwkrYs9choetu9LdW4k/w987-h740-no/P7253383.JPG"><br>
<img
style="width: 90px; height: 90px; position: relative; top: -343px; left: 280px;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBXNGAeQtmgfZfst3m9-nITKDa0_FdSmYvAihOrHviD9vxuNDClYF_vE6u_apqAYskeWOIFldaHyXAP2pVSiD81Obd6JO8LZHQmpiqM0sARSxZwEe979YdCeyu3PUGdyas2oagB-MOwQU/s256-no/23_Play-256.png">

注意：
用position: relative移動編輯物件後，原本編輯物件的位置仍會保留，換言之，會有一片空白的空間出來。可以用 style="margin-bottom: -3em; 這個語法來把下方的編輯內容往上推。數字愈大，上推的愈多，要記得是負數字。

3. 影音教學。



教學範例使用jQuery：#2

1. 範例圖示：

2. 語法：
(1)請先將下列程式碼貼入<head>xxx</head>之間或<body>之後：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

(2)移動物件的語法：
<script>
$(function () {
$( "#e002" ).position({
  my: "left+100% top+50",
  at: "left center",
  of: "#e001"
});
});
</script>
語法說明：
  1. 兩張圖都要設id才能進行移動。此例大圖為id="e001"，小圖為id="e002"
  2. 對齊方式選項，水平為﹛ left, center, right ﹜三選一，垂直為﹛ top, center, bottom ﹜三選一
  3. 要移動的那張圖，要記得設 style="position: absolute;"

3. 影音教學


語法補充包◢
本篇頁首 【陰影字語法︽】 的語法：
<a onmouseout="UnTip()" onmouseover="TagToTip('ddd061901', BALLOON, false, ABOVE, true, STICKY, true, CLOSEBTN,true, TITLEBGCOLOR, 'transparent', SHADOW, true, SHADOWWIDTH, 2, PADDING, 3, BORDERWIDTH, 1, BORDERCOLOR, '#C0C0C0', WIDTH, 400)" href="javascript: void(0)">【陰影字語法︽】</a>
註：<div id="ddd061901" xxx> 要被呈現的內容 </div> 。【標準教學內容】
<div style="color: darkred; font-family: 微軟正黑體; font-size: 340%; font-weight: bold; margin-bottom: 5px; text-shadow: 3px 3px 3px silver; ">愛移到那裡就到那裡！<br></div>


2 則留言:

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://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>
語法說明：
  1. 步驟二的這組語法，只能跑出一個互動元素。
  2. 如要做第二個互動元素，請再複製步驟二一次，但要更改 id ，即藍色字體者（二處）。例如把本例 capslide_img_cont01  改成 capslide_img_cont02 即可。但注意，二處藍色字者同時都要改。


3.上例語法範例。


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


4.教學影音。




資料來源 jCapSlide 。


2 則留言: