2010年12月01日


Google MAP API 経由で Panoramio を表示する場合、Google Chrome のみ 常に手前に出てしまうので、wmode を 後から transparent に変更

http://lightbox.on.coocan.jp/pano_mio_view2.html?1788181&400&266

上は単純に参照に使っているだけですが、panoramio の表示そのものをサムネイルにする為
に透過画像を重ねると、Google Chrome だけが手前になってしまいます。そこで、完全では
ありませんが、0.5 秒後に param を全て書き換えています。

ですから、重ねる処理が必要無い場合は、wmode の書き換え処理は必要ありません
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:v="urn:schemas-microsoft-com:vml"
>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>

<script
	src="http://maps.google.com/maps?file=api&amp;v=2.17&amp;sensor=false&amp;key=ABQIAAAADuryzsZi1CenwhafsPEvzBRS10rmJJPhM3vlpPkrWCHuNTDImRTYfD_FN1NxrjVEOgXa8q0JiFN0CQ"
	type="text/javascript"
></script>

<script type="text/javascript">
var params = (location.search + "&&&&&&&&&").replace("?","");
var param = params.split("&");
if ( param[1] == '' ) {
	param[1] = "800px";
}
else {
	param[1] += "px";
}
if ( param[2] == '' ) {
	param[2] = "600px";
}
else {
	param[2] += "px";
}

var myPano;
function initialize() {

	var panoOpts = { 
		features: { streetView: false, userPhotos: true },
		userPhotoOptions: { photoRepositories: [ 'panoramio'] } 
	}; 

	myPano = new GStreetviewPanorama(document.getElementById("pano"), panoOpts);
	var fenway = { repository: "panoramio", id: param[0] }; 
	GEvent.addListener(myPano, "error", handleNoFlash);

	// 表示
	myPano.setUserPhoto(fenway);
}

function handleNoFlash(errorCode) {

	if (errorCode == 603) {
		alert("Error: Flash doesn't appear to be supported by your browser");
		return;
	}
}
function changeFlash() {

	var target = document.getElementById("pano");
	var obj = target.getElementsByTagName("OBJECT")[0];
	var param = obj.innerHTML;

	var re;
	re = /<param\s+?name\s*=\s*([\"'])?wmode([\"'])?[^>]*>/;
	param = param.replace(re, "<param name=\"wmode\" value=\"transparent\">");
	obj.innerHTML = param;

}

function addEvent( obj, evt, callback_func ) {
	if ( obj.attachEvent ) {
		obj.attachEvent( "on" + evt , callback_func );
	}
	else {
		obj.addEventListener( evt , callback_func , false );
	}
}
// Google Chrome の場合 flash の wmode を transparent に変更
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("chrome") > -1) {
	addEvent(window, 'load', function(){ setTimeout( "changeFlash()", 500 );});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div name="pano" id="pano"></div>
<script type="text/javascript">
document.getElementById("pano").style.width = param[1];
document.getElementById("pano").style.height = param[2];
</script>
</body>
</html>



posted by at 2010-12-01 14:40 | クライアント/サーバー | このブログの読者になる | 更新情報をチェックする