Taiwan Travel Guide- 說明文件

資工 3B 09957146 張致行資工 3B 09957135 李啟嘉

網站架構

Index.html

中台灣景點北台灣景點 南台灣景點 聯絡我們交通資訊 圖片交流認識台灣

Introduce.html

South1.htmlSouth2.htmlSouth3.html

center1.htmlcenter2.htmlcenter3.html

north1.htmlnorth2.htmlnorth3.html

Contact.htmlTraffic.html Album.phpPhoto.phpPhotodetail.php…等 10個 php

網站技術

Index.html 利用 Javascript 固定時間換圖片var speed = 3000; // 圖片切換時間var current = 1;

function start()

{

if(current == 6)

current = 1;

var pic = 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 放入 <iframe src = “http://www.youtube.com/embed/zDJfLjUTapA&list=PL4wjBuDaBIC6b3KtauJI2NHZ-0T4zE4Ig”>

即可嵌入 youtube

網站技術

Javascript mouseover 換圖function display(imgfile)

{

var bigImage = document.getElementById("imgCover");

bigImage.setAttribute("src","photos/"+imgfile);//chage src

}

function start()

{

document.getElementById("first").addEventListener("mouseover",function(){ display("10-1.jpg");},false);

}

滑鼠移到 image id 時 , 即進入 function display 換 src

網站技術

Jquery 顯示圖片導覽利用 js/jquery.lightbox-0.5.js Lightbox JQ 裡的 API 套件 去達成點擊放大圖片效果

再利用 JavaScript mouseover 造成換圖效果

網站技術

Google Map APInew google.maps.LatLng( 經緯度 );// 用於設定經緯度 var myOptions = {// 用於 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

位置預設於海大

網站技術

Google 導航request={  origin: LatLng | String, // 出發地 destination: LatLng | String, // 目的地 travelMode: DirectionsTravelMode, // 交通模式

} DirectionsTravelMode.DRIVING

DirectionsTravelMode.WALKING 

網站技術 (Goole map)

利用 Facebook API 做出讚及留言版<script>

(function(d, s, id) {

var js, 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;

網站技術

$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…)

網站技術 (php)

1. 使用者可以得知北中南景點，並於該頁面欣賞到當地圖片，可點取圖片利用 jQuery 欣賞放大圖片。

2. 如果不知道該景點如何前往，我們提供 Google Map 供您查詢。

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/