Embedded Files
應用 eWeb 4 製作出影像地圖：
請使用繪圖軟體，例如：小畫家(mspaint)，先製作出圓形、矩形、多邊形的圖樣的檔案，然後再使用 eWeb 4 製作出影像地圖。
影像地圖 (Image Map)
主要用途是在圖片上劃分出多個區塊作超連結使用，以圖片的位置為座標，我們使用 eWeb 4 的影像地圖功能來製作出所需的影像地圖選單。
請在 eWeb 4 中置入一張圖片並點選到該圖片，選擇「檢視/工具列/圖片」，就會呈現影像地圖的工具(例如：矩形作用區)，如圖所示。
2. 我們也可以使用 MS Word 設計出菜色圖並以 SmartArt 呈現，如圖所示：
插入標籤/啟動Smart Art/選擇關聯圖/六邊形圖組；開啟左方文字窗格，編輯菜色分類。
對著小圖示 Click * 2，使用 Bing 影像搜尋菜色圖片。
影像地圖 Coding 範例：
<map id="ImgMap0" name="ImgMap0">
<area coords="17, 29, 93, 115" href="http://www.ntub.edu.tw" shape="rect" target="_blank" />
<!-- rect 矩形需要四個值，分別是左上角x座標、y座標，右下角x座標、y座標。 -->
<area alt="" coords="208, 72, 48" href="default.html" shape="circle" />
<!-- circle 圓形需要有三個值，分別是中心點的x座標、y座標與半徑。 -->
<area coords="83, 182, 140, 154, 197, 182, 196, 239, 140, 268, 83, 236" href="http://www.cycu.edu.tw" shape="poly" target="_blank" />
<!-- poly 多邊形至少需要6個值，如果是三角形需要6個值，如果是四邊形需要8個值，以此類推(x座標、y座標)。 -->
</map>
<img alt="" src="map1.png" usemap="#ImgMap0" />
JavaScript (JS) 的基本函數設計，基本語法如下：
function funName (parameter 1, parameter 2, ..., parameter N) { statements ; }
JS 函數設計範例：
<br/><br/>
<input id="lang1" name="lang[]" type="checkbox" value="PHP 語言" />PHP 語言
<input id="lang2" name="lang[]" type="checkbox" value="JS 語言" />JS 語言
<input id="lang3" name="lang[]" type="checkbox" value="HTML 語言" />HTML 語言
<br/><br/><a href="#" onclick="lang01('lang1');" title="選擇：PHP 語言" id="mt1" >測試按鈕一</a> <a href="#" onclick="lang02('lang2');" title="選擇：JS 語言" id="mt2"> 測試按鈕二</a> <a href="#" onclick="lang03('lang3');" title="選擇：HTML 語言" id="mt3">測試按鈕三</a>
<script>
function lang01(l1){
if (document.getElementById(l1).checked == true){
document.getElementById(l1).checked = false;
document.getElementById("mt1").title = "選擇：PHP 語言";
}else{
document.getElementById(l1).checked = true;
document.getElementById("mt1").title = "取消：PHP 語言";
} }
function lang02(l2){
if (document.getElementById(l2).checked == true){
document.getElementById(l2).checked = false;
document.getElementById("mt2").title = "選擇：JS 語言";
}else{
document.getElementById(l2).checked = true;
document.getElementById("mt2").title = "取消：JS 語言";
} }
function lang03(l3){
if (document.getElementById(l3).checked == true){
document.getElementById(l3).checked = false;
document.getElementById("mt3").title = "選擇：HTML 語言";
}else{
document.getElementById(l3).checked = true;
document.getElementById("mt3").title = "取消：HTML 語言";
} }
</script>
// 以下為提示：
// 來源網址語法：$_SERVER['HTTP_REFERER'];
$orderTime = new DateTime("now", new DateTimeZone('Asia/Taipei'));
$orderTime = $orderTime -> format("Y年m月d日H時i分s秒");
echo "<script>alert('溫馨提示：您尚未點菜!'); location.href = 'order.php'; </script>";
期中考為上機實作「點菜系統程式設計」(100%)：
1.點菜系統流程圖規劃與繪製 (15%)。
2.請用 MS Word 設計出菜色圖並以 SmartArt (六邊形圖) 呈現10道菜色圖文 (15%)。
3.請使用「菜色分類之影像地圖」做出表單設計、點菜資料接收、點菜資料分析判斷並在網頁上呈現點菜結果，包括「點菜單」的操作介面必須是以影像地圖做為點菜選單並提示所欲點菜之名稱 (當按下 Reset 按鈕以後，提示所欲點菜之名稱亦需正常顯示為選擇：該菜名) (35%)、「點菜明細表」內含未點菜提示、來源網址、訂餐時間、餐桌號 (請輸入學號)、已點菜色的明細、單價與總計價格、返回點菜單 (35%)。
註：「點菜單」與「點菜明細表」如下圖所示，該系統操作請參考「 Demo」。
點菜單
點菜明細表
Report abuse