Taiwan Travel Guide - 說明文件

Taiwan Travel Guide-說明文件 資工3B 09957146 張致行資工3B 09957135 李啟嘉

網站架構 Index.html 認識台灣北台灣景點中台灣景點南台灣景點交通資訊圖片交流聯絡我們 Introduce .html north1.html north2.html north3.html center1.html center2.html center3.html South1.html South2.html South3.html Traffic.html Album.php Photo.php Photodetail.php …等10個php Contact.html

網站技術 Index.html利用Javascript固定時間換圖片 var speed = 3000; //圖片切換時間 var current = 1; function start() { if(current == 6) current = 1; varpic = document.getElementById("img"); pic.setAttribute("src","pic" + current + ".png"); ++current; setTimeout(“start()”,speed); //(3秒跑setTimeout一次) } window.addEventListener("load", start, false);

網站技術 Youtube嵌入 <iframe class=“youtube-player” type=“text/html” width=“640” height=“385” src=“http://www.youtube.com/embed/影片ID" frameborder="0"> </iframe> 例: http://www.youtube.com/watch?v=zDJfLjUTapA&list=PL4wjBuDaBIC6b3KtauJI2NHZ-0T4zE4Ig 每個youtube影片都有一個ID,將此ID放入<iframesrc = “http://www.youtube.com/embed/zDJfLjUTapA&list=PL4wjBuDaBIC6b3KtauJI2NHZ-0T4zE4Ig”> 即可嵌入youtube

網站技術 Javascriptmouseover換圖 function display(imgfile) { varbigImage = document.getElementById("imgCover"); bigImage.setAttribute("src","photos/"+imgfile);//chagesrc } function start() { document.getElementById("first").addEventListener("mouseover", function(){ display("10-1.jpg");},false); } 滑鼠移到image id時,即進入function display 換src

網站技術 Jquery 顯示圖片導覽利用 js/jquery.lightbox-0.5.jsLightboxJQ裡的API套件去達成點擊放大圖片效果再利用 JavaScriptmouseover造成換圖效果

網站技術 Google Map API new google.maps.LatLng(經緯度);//用於設定經緯度 varmyOptions = {//用於map呈現樣子 zoom:16, //縮放比例 mapTypeId: google.maps.MapTypeId.ROADMAP,//地圖的樣式 center: initialPlace//中心點 } new google.maps.Map(document.getElementById(“map_canvas”), myOptions)//將要放地圖的div給他並且將設定好的參數呈現使用者位址 W3C navigator.geolocation//用於偵測,較新瀏覽器才支援 Google Gears Geolocation API 位置預設於海大

網站技術(Goole map) Google 導航 request={ origin: LatLng | String, //出發地 destination: LatLng | String,//目的地travelMode: DirectionsTravelMode,//交通模式 } DirectionsTravelMode.DRIVING DirectionsTravelMode.WALKING

網站技術 利用Facebook API 做出讚及留言版 <script> (function(d, s, id) { varjs, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = “//connect.facebook.net/en_US/all.js#xfbml=1”;//顯示語言 fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

網站技術 利用php做出相簿效果 <?php require_once("connMysql.php"); $sql = “select album.album_id, album.album_name, photo.photo_file, count(photo.album_id) from album, photo where album.album_id = photo.album_id group by album.album_id"; $result = mysql_query($sql); if(isset($_GET["page"])) //設定頁數 $page = $_GET["page"]; else $page = 1;

網站技術(php) $total = mysql_num_rows($result); //總共有幾本相簿 $per_page = 8; //每頁顯示8本相簿 $total_page = ceil($total/$per_page); //總頁數 $start = $per_page * ($page - 1); //顯示每頁第一筆資料,0是第一筆 if( $total != 0 ) mysql_data_seek($result, $start); //將指標指向每頁第一筆data(0,8,16…)

網站特色 1.使用者可以得知北中南景點，並於該頁面欣賞到當地圖片，可點取圖片利用jQuery欣賞放大圖片。 2.如果不知道該景點如何前往，我們提供GoogleMap供您查詢。 3.如果您想把您在當地旅遊所拍攝的照片上傳我們提供您分享及上傳空間(php+MySQL) 。 root為管理者可delete和add相簿、照片(帳:root密:0206) 其他會員僅能新增相簿及照片 4.提供Facebook留言板供大家留言討論。

最後分工 09957146 張致行: 網頁版面設計、網頁相簿(php) 、中台灣景點、聯絡我們、首頁設計、認識台灣、CSS修正 09957134 李啟嘉: Google Map API, JQuery顯示, 北台灣景點, 南台灣景點, 資料收集

資料來源 • 觀光局 http://www.taiwan.net.tw/w1.aspx • 旅遊王 http://www.travelking.com.tw/

Taiwan Travel Guide - 說明文件