|
むかし堺は、対明貿易や南蛮貿易など海外との交流拠点として発展しました。
その様子を再現した堺市優秀景観賞優秀賞に輝く、”大小路シンボルロードに面する堺市立市小学校 の壁画”です。
- ボタンをクリックすると方向やスピードが変わり、案内役のエッグくんにマウスを置くと静止します。
- 写真は合切袋の「おかりん」さんの撮影です。
<![CDATA[
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>パノラマ絵巻</title>
<SCRIPT language="javascript">
//写真ファイル
syasin=new Array("P1010.jpg","P1011.jpg","P1012.jpg","P1013.jpg","P1014.jpg",
"P1015.jpg","P1016.jpg","P1017.jpg","P1018.jpg","P1019.jpg","P1020.jpg",
"P1021.jpg","P1022.jpg","P1023.jpg","P1024.jpg","P1025.jpg","P1026.jpg",
"P1027.jpg","P1028.jpg","P1029.jpg","P1030.jpg","P1031.jpg","P1032.jpg");
img_ur="./"; //別の場所に写真を置くときは写真のあるＵＲＬを書く
img_h=300; //写真を表示する縦巾
tp=50; //写真を表示する縦位置
tim2="";
//ユーザー環境
scr_l=screen.width; //ディスプレーの横幅
scr_h=screen.height; //ディスプレーの縦幅
///スクロール初期設定///
x=30; //スタート位置
rl=2; //スクロールスピード
///アニメ初期設定///
bx=4;by=2; //上下するスピード
bxx=350;byy=100; //スタート位置
imgurl2=img_url+"egg.gif"; //右向きイメージ
imgurl3=img_url+"egg.gif"; //左向きイメージ
up_dw=0; //アニメの動きのタイプ（０：ボール ／１：魔女）
sy=0;
///イメージの幅自動計算）///
function img_width(){
roll_l=0;
for(i=0;i<syasin.length;i++){
roll_l=roll_l+document.images["img_"+i].width;
}
//ボタン配置
document.getElementById("button").style.top = tp+30 ;
document.getElementById("button").style.left =10 ;
}
///画面の動き///
function mv(){
///スクロール///
x=x+rl;
if(x>roll_l+30){x=30;} //右スクロールをエンドレスに
if(x<30){x=roll_l+30;} //左スクロールをエンドレスに
document.getElementById("hekiga").style.top = tp ;
document.getElementById("hekiga").style.left =x*-1 ;
///アニメの動き///
if(bxx>scr_l-50){ //右端で反転
bx=bx * -1;
document.ball.src = imgurl3;
}
if(bxx<5){ //左端で反転
bx=bx * -1;
document.ball.src = imgurl2;
}
if(byy>tp+img_h-40){ //下端で反転
by=by * -1;
}
if(byy<tp){ //上端で反転
by= by * -1;
}
document.getElementById("qpon").style.top = byy;
document.getElementById("qpon").style.left =bxx;
bxx=bxx+bx;
//上下動魔女タイプ
if(up_dw==1){
sy=sy+0.3;
by=4*Math.sin(sy);
}
byy=byy+by;
tim2=setTimeout("mv()",50);
}
//アニメで静止
function stp(){
clearTimeout(tim2);
}
//アニメで再開
function go(){
tim2=setTimeout("mv()",50);
}
//ボタンで切り替え//
function xy(c){
rl=c;
}
//-->
</SCRIPT>
</head>
<BODY bgcolor=#880000 text=#ffffff onLoad="img_width();mv();">
<center>
<script language = "JavaScript">
<!--
//
if (document.layers) {
alert("インターネットエクスプローラーかネットスケープのバージョン６以上をお使いください");
}
//写真（横に二重にダブらせて表示）
document.writeln("<div id='hekiga' style='position:absolute;top:",tp,";left:0'>");
document.writeln("<table border=10 width=2000 height=300><tr><td>");
document.writeln("<table border=0 cellspacing=0 cellpadding=0><tr>");
for(k=0;k<=1;k++){
for(i=0;i<syasin.length;i++){
document.writeln('<td><img src="',img_url,syasin[i],'" name="img_',k*100+i,'" height=',img_h,'></td>');
}
}
document.writeln('</td></tr></table></td></tr></table>');
document.writeln("</div>");
///アニメ
document.writeln("<div id='qpon' style='position:absolute'; display='block';>");
document.writeln("<img name='ball' src='",imgurl2,"' onMouseOver='stp()' onMouseOut='go()' onTouchStart='stp();return false' onTouchEnd='go()'>");
document.writeln('</div>');
//-->
</script>
<!--ボタン-->
<div id='button' style='position:absolute;top:0;left:0'>"
<form>
<table bgcolor=#bbbbbb>
<tr><th><input type=button value="<<" onClick="xy(10)"></th></tr>
<tr><th><input type=button value=" < " onClick="xy(2)"></th></tr>
<tr><th><input type=button value=" o " onClick="xy(0)"></th></tr>
<tr><th><input type=button value=" > " onClick="xy(-2)"></th></tr>
<tr><th><input type=button value=">>" onClick="xy(-10)"></th></tr>
</table>
</form>
</div>
<center>
<h1>堺市立市小学校塀のパノラマ壁画</h1>
<div id='com' style='position:absolute;top:400;left:0'>
<table border=0 width=100%><tr><td></td><td width=700>
<font color=#ffffff>
むかし堺は、対明貿易や南蛮貿易など海外との交流拠点として発展しました。<br>
その様子を再現した堺市優秀景観賞優秀賞に輝く、”大小路シンボルロードに面する堺市立市小学校 の壁画”です。<br>
案内役のエッグくんにマウスを置くと停止します。
</font>
</td><td></td></tr></table>
</div>
</center>
</body>
</html>
]]>
| |