Google Street Viewみたいな奴を作るとしたら？

JavaScript jQuery

Google Mapみたいな奴を作るとしたら？で頑張ってみたけど、MapじゃなくてStreet Viewだね。

html

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>GoogleMapModoki</title>
<script src="js/jquery.js" type="application/x-javascript" charset="utf-8"></script>
<script src="js/change_img4.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/gmm4.css">
<style type="text/css"></style>
</head>
<body>
<div id="pict">
<div id="h1w1" class="arrowbox"></div>
<div id="h1w2" class="arrowbox"></div>
<div id="h1w3" class="arrowbox"></div>
<div id="h2w1" class="arrowbox"></div>
<div id="h2w2" class="arrowbox"></div>
<div id="h2w3" class="arrowbox"></div>
<div id="h3w1" class="arrowbox"></div>
<div id="h3w2" class="arrowbox"></div>
<div id="h3w3" class="arrowbox"></div>
</div>
</body>
</html>

css

#pict{
	width: 1027px;
	height: 768px;
	border: 1px solid gray;
	background: url(../img/msc_table2/1-1-1.jpg);
	float: left;
}
.arrowbox{
	float: left;
	width: 33%;
	height: 33%;
	border: 1px solid gray;
}
#h1w2, #h2w1, #h2w3, #h3w2{
	background: url(../img/sample/arrow.gif) no-repeat center center;
}
#h2w1{
	-webkit-transform: rotate(-90deg);  
	-moz-transform: rotate(-90deg); 
}
#h2w3{
	-webkit-transform: rotate(90deg);  
	-moz-transform: rotate(90deg); 
}
#h3w2{
	-webkit-transform: rotate(180deg);  
	-moz-transform: rotate(180deg); 
}
#h1w1{
	background: url(../img/sample/left.gif) no-repeat center center;
}
#h1w3{
	background: url(../img/sample/right.gif) no-repeat center center;
}

js

//初期設定
	var img_path = "img/msc_table2/";
	
function splitName(name){
	var tmpPath = name.split("/");
	var tmpName = tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2).split(".");
	var vwd = tmpName[0].split("-");
	return vwd;
}

function step_to(name, way){
	//移動するところ
	var vwd=splitName(name);
	var v=eval(vwd[0]);//縦
	var w=eval(vwd[1]);//横
	var d=eval(vwd[2]);//方向
	
	if(((way=="ue") && (d==1)) || ((way=="hidari") && (d==2)) || ((way=="sita") && (d==3)) || ((way=="migi") && (d==4))){
		v=v-1;
	}else if(((way=="migi") && (d==1)) || ((way=="ue") && (d==2)) || ((way=="hidari") && (d==3)) || ((way=="sita") && (d==4))){
		w=w+1;
	}else if(((way=="sita") && (d==1)) || ((way=="migi") && (d==2)) || ((way=="ue") && (d==3)) || ((way=="hidari") && (d==4))){
		v=v+1;
	}else if(((way=="hidari") && (d==1)) || ((way=="sita") && (d==2)) || ((way=="migi") && (d==3)) || ((way=="ue") && (d==4))){
		w=w-1;
	}
	var rtn="url('"+img_path+v+"-"+w+"-"+d+".jpg')";
	return rtn;
}
function turn_to(name, way){
	var vwd=splitName(name);
	var v=eval(vwd[0]);//縦
	var w=eval(vwd[1]);//横
	var d=eval(vwd[2]);//方向
	
	d=d+way;
	if(d==5){d=1;}
	if(d==0){d=4;}
	
	var rtn="url('"+img_path+v+"-"+w+"-"+d+".jpg')";
	return rtn;
}

$(function(){
	var img_path="img/msc_table/";
    $("#h1w2").click(function(){
    //上に移動、vを1減らす
    	var getPath=$("#pict").css("background-image");
		$("#pict").css("background-image", step_to(getPath, "ue"));
        return false;
    });
    $("#h3w2").click(function(){
    //下に移動、vを1足す
    	var getPath=$("#pict").css("background-image");
		$("#pict").css("background-image", step_to(getPath, "sita"));
        return false;
    });
    $("#h2w3").click(function(){
    //右に移動　hに1を足す
    	var getPath=$("#pict").css("background-image");
    	$("#pict").css("background-image", step_to(getPath, "migi"));
        return false;
    });
    $("#h2w1").click(function(){
    //左に移動　hから1を引く
    	var getPath=$("#pict").css("background-image");
    	$("#pict").css("background-image", step_to(getPath, "hidari"));
        return false;
    });
    $("#h1w1").click(function(){
    //左に回転　hから1を引く
    	var getPath=$("#pict").css("background-image");
		$("#pict").css("background-image", turn_to(getPath, -1));
        return false;
    });
    $("#h1w3").click(function(){
    //右に回転　hに1を足す
    	var getPath=$("#pict").css("background-image");
    	$("#pict").css("background-image", turn_to(getPath, 1));
        return false;
    });
});

とりあえずは動くようになった。
　
問題「画像がなかったときに何も表示されないし、リロードで再表示するしかない」

画像がなかったら

$.ajaxのsuccessとerrorで出来た。動かしてみてわかったのはFirefox限定になっていること。
js

//初期設定
	var img_path = "img/msc_table2/";
	
function splitName(name){
	var tmpPath = name.split("/");
	var tmpName = tmpPath[tmpPath.length-1].slice(0, tmpPath[tmpPath.length-1].length-2).split(".");
	var vwd = tmpName[0].split("-");
	return vwd;
}

function step_to(name, way){
	//移動するところ
	var vwd=splitName(name);
	var v=eval(vwd[0]);//縦
	var w=eval(vwd[1]);//横
	var d=eval(vwd[2]);//方向
	
	if(((way=="ue") && (d==1)) || ((way=="hidari") && (d==2)) || ((way=="sita") && (d==3)) || ((way=="migi") && (d==4))){
		v=v-1;
	}else if(((way=="migi") && (d==1)) || ((way=="ue") && (d==2)) || ((way=="hidari") && (d==3)) || ((way=="sita") && (d==4))){
		w=w+1;
	}else if(((way=="sita") && (d==1)) || ((way=="migi") && (d==2)) || ((way=="ue") && (d==3)) || ((way=="hidari") && (d==4))){
		v=v+1;
	}else if(((way=="hidari") && (d==1)) || ((way=="sita") && (d==2)) || ((way=="migi") && (d==3)) || ((way=="ue") && (d==4))){
		w=w-1;
	}
	var url_path=img_path+v+"-"+w+"-"+d+".jpg";
	change_bgimg(url_path);
	return false;
}
function change_bgimg(url_path){
	var bg_path="url('"+url_path+"')";
	$.ajax({
		type : "get",
		url  : url_path,
		success : function(){
			$("#pict").css("background-image", bg_path);
		},
		error : function(){
			alert("画像はありません");
		}
	});
}


function turn_to(name, way){
	var vwd=splitName(name);
	var v=eval(vwd[0]);//縦
	var w=eval(vwd[1]);//横
	var d=eval(vwd[2]);//方向
	
	d=d+way;
	if(d==5){d=1;}
	if(d==0){d=4;}
	
	var url_path=img_path+v+"-"+w+"-"+d+".jpg";
	change_bgimg(url_path);
	return false;
}

$(function(){
	var img_path="img/msc_table/";
    $("#h1w2").click(function(){
    //上に移動、vを1減らす
    	var getPath=$("#pict").css("background-image");
    	step_to(getPath, "ue");
        return false;
    });
    $("#h3w2").click(function(){
    //下に移動、vを1足す
    	var getPath=$("#pict").css("background-image");
    	step_to(getPath, "sita");
        return false;
    });
    $("#h2w3").click(function(){
    //右に移動　hに1を足す
    	var getPath=$("#pict").css("background-image");
		step_to(getPath, "migi");
        return false;
    });
    $("#h2w1").click(function(){
    //左に移動　hから1を引く
    	var getPath=$("#pict").css("background-image");
    	step_to(getPath, "hidari");
        return false;
    });
    $("#h1w1").click(function(){
    //左に回転　hから1を引く
    	var getPath=$("#pict").css("background-image");
		turn_to(getPath, -1);
//		$("#pict").css("background-image", turn_to(getPath, -1));
        return false;
    });
    $("#h1w3").click(function(){
    //右に回転　hに1を足す
    	var getPath=$("#pict").css("background-image");
		turn_to(getPath, 1);
//    	$("#pict").css("background-image", turn_to(getPath, 1));
        return false;
    });
});