台灣最大程式設計社群網站
線上人數
1116
 
會員總數:245959
討論主題:189543
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> 自製首頁連結網址
[]  
[我要回覆]
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
自製首頁連結網址
價值 : 30 QP  點閱數:1066 回應數:0
樓主

吳宗彥
門外漢
0 8
101 8
發送站內信

https://googledrive.com/host/0B4sg_YiZwKptXzZOdVVtZ3piTGc/HTMLPage5.htm 這是我們組員做的動物園網址

不過最近連絡不到他 基於時間緊迫上來發問

目前網址只能用手機內建瀏覽器瀏覽 Chorm不支援

想請問 我要如何修改才能使的點擊動物圖案時連結到自己做的網址??





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>


<style type="text/css">
body{
width:100%;
height:100%;
font-family : '敺株�甇��擃�';
background-color: #f0e085;
}
.back{
position: absolute;
left :0px;
top:0px;
overflow : hidden;
}
#elephant{

position: absolute;
left :55%;
bottom :0px;
}
#lion{

position :absolute;
left : 0%;
bottom: 75%;

}
#panda{

position :absolute;
left : 0%;
top:78%;

}
#kangerzoo{

position :absolute;
right : 68%;
bottom:0%;

}
#zoo{
position : absolute;
left : 0;
width : 100%;
top : 30%;


}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>

<div id="main" class="back">
<div id="elephant">
<a href="#" onclick="ea();"><img src="image/elephant.png" id="elephant_pic" /></a>
</div>
<div id="lion">
<a href="#" onclick="la();"><img src="image/lion.png" id="lion_pic"/></a>
</div>
<div id="panda">
<a href="#" onclick="pa();"><img src="image/panda.png" id="panda_pic"/></a>
</div>
<div id="kangerzoo">
<a href="#" onclick="ka();"><img src="image/kangerzoo.png" id="kangerzoo_pic"/></a>
</div>
<div align="center" id="zoo">
<img src="image/topic_tp_zoo.png" id="zoo_pic"/>
</div>
</div>
<script>
var h = 0;
var w = 0;
$(document).ready(
function () {
h = $(window).height();
w = $(window).width();
$("#main").width(w + 10).height(h + 10);

$("<img/>").attr("src=", "image/elephant.png").load(function () {
imgWidth = this.width;
imgHeight = this.height;
$('#elephant_pic').height(imgHeight * h / 960).width(imgWidth * w / 640);
$('#kangerzoo_pic').height(imgHeight * h / 960).width(imgWidth * w / 640);

});




$("<img/>").attr("src", "image/lion.png").load(function () {
imgWidth = this.width;
imgHeight = this.height;
$('#lion_pic').width(imgWidth * w / 640).height(imgHeight * h / 960);

$('#panda_pic').width(imgWidth * w / 640).height(imgHeight * h / 960);

});
$("<img/>").attr("src", "image/topic_tp_zoo.png").load(function () {
imgWidth = this.width;
imgHeight = this.height;

$('#zoo_pic').width(imgHeight * h / 200);

});



}
);





function ea() {
if ($("#zoo").css("display") != "none") {
$("#elephant").animate({ 'left': '-46%' }, 1000);
$("#zoo").fadeOut(1000);

$("#kangerzoo").fadeOut(1000);
$("#panda").fadeOut(1000);
$("#lion").fadeOut(1000);
}
else {
$("#elephant").animate({ 'left': '55%' }, 1000);
$("#zoo").fadeIn(1000);
$("#kangerzoo").fadeIn(1000);
$("#panda").fadeIn(1000);
$("#lion").fadeIn(1000);


}
}
function pa() {
if ($("#zoo").css("display") != "none") {
$("#panda").animate({ 'top': '0%' }, 1000);
$("#zoo").fadeOut(1000);

$("#kangerzoo").fadeOut(1000);
$("#lion").fadeOut(1000);
$("#elephant").fadeOut(1000);
}
else {
$("#panda").animate({ 'top': '78%' }, 1000);
$("#zoo").fadeIn(1000);
$("#kangerzoo").fadeIn(1000);
$("#lion").fadeIn(1000);
$("#elephant").fadeIn(1000);


}





}


function la() {
if ($("#zoo").css("display") != "none") {
$("#lion").animate({ 'bottom': '-26%' }, 1000);
$("#zoo").fadeOut(1000);

$("#kangerzoo").fadeOut(1000);
$("#panda").fadeOut(1000);
$("#elephant").fadeOut(1000);
}
else {
$("#lion").animate({ 'bottom': '75%' }, 1000);
$("#zoo").fadeIn(1000);
$("#kangerzoo").fadeIn(1000);
$("#panda").fadeIn(1000);
$("#elephant").fadeIn(1000);


}





}


function ka() {
if ($("#zoo").css("display") != "none") {
$("#kangerzoo").animate({ 'right': '-30%' }, 1000);
$("#zoo").fadeOut(1000);

$("#lion").fadeOut(1000);
$("#panda").fadeOut(1000);
$("#elephant").fadeOut(1000);
}
else {
$("#kangerzoo").animate({ 'right': '68%' }, 1000);
$("#zoo").fadeIn(1000);
$("#lion").fadeIn(1000);
$("#panda").fadeIn(1000);
$("#elephant").fadeIn(1000);


}





}



</script>




<title></title>
</head>

</html>

本篇文章發表於2013-10-10 14:17
目前尚無任何回覆
   

回覆
如要回應,請先登入.