愛移到那裡就到那裡！
為什麼要移動編輯物件？因為常碰到以下狀況▽：
教學範例：#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">
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>
<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>
語法說明：$(function () {
$( "#e002" ).position({
my: "left+100% top+50",
at: "left center",
of: "#e001"
});
});
</script>
- 兩張圖都要設id才能進行移動。此例大圖為id="e001"，小圖為id="e002"
- 對齊方式選項，水平為﹛ left, center, right ﹜三選一，垂直為﹛ top, center, bottom ﹜三選一
- 要移動的那張圖，要記得設 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>
老师，youtube视频上面那个播放摁扭，是不是就是经过这个处理之后再加上超链接的一个图片呢？
回覆刪除youtube視頻那個是原本預設的，我並沒有下語法。但我這個語如，如果圖片上加了可以跑出視頻的語法，不管移到那裡，按一下就會有視頻。
回覆刪除