<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 


<meta name="Author" content="haru.Japan"> 

<meta name="keywords" content="青柳晴子,haru.Japan,アンティークとんぼ玉,唐草倶楽部,アクセサリー,上海"> 


<title>::::: 上海の悦楽 < M50 > :::::

</title> 


<meta http-equiv="imagetoolbar" content="no"> 

 
<style type="text/css"> 

	html { 

		overflow: hidden; 

	} 

	body { 

		margin: 0px; 

		padding: 0px; 

		background: #000; 

		position: absolute; 

		width: 100%; 

		height: 100%; 

	} 

	#diapo { 

		position: absolute; 

		left: 0px; 

		top: 20%; 

		width: 100%; 

		height: 65%; 

		background: #000; 

		overflow: hidden; 

	} 

	#slider { 

		position: absolute; 

		width: 100%; 

		height: 70%; 

	} 

	#slider img { 

		border: none; 

		position:absolute; 

		visibility: hidden; 

		filter: alpha(opacity=40); 

		opacity: 0.4; 

		-ms-interpolation-mode:nearest-neighbor; 

		image-rendering: optimizeSpeed; 

	} 

	#button { 

		position: absolute; 

		overflow: hidden; 

	} 

	#legend { 

		position: absolute; 

		font-family: arial, helvetica, verdana, sans-serif; 

		background: #111; 

	} 

	#button span { 

		position:absolute; 

		height: 100%; 

	} 

	#button span:hover { 

		background:#FFF; 

	} 

	.loaded { 

		background: #666; 

		cursor: pointer; 

	} 

	.selected { 

		background: #FFF; 

	} 

	#title { 

		float: left; 

		margin-left: 0.5em; 

		color: #fff; 

	} 

	#txt { 

		float: left; 

		margin-left: 1em; 

		color: #aaa; 

	} 

	#credit { 

		position: absolute; 

		color: #fff; 

		font-family: arial; 

		font-size: 0.8em; 

		width:99%; 

		text-align: right; 

		bottom: 5px;

	} 

	a {text-decoration: none;color:#fff;} 

	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 

	a:visited {text-decoration: none;color:#fff;} 

	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 

</style> 

 
<script type="text/javascript"> 


/* ====================================================================================== 

        Thanks a lot to Gerard Ferrandez for the script ,  It's really amazing!         

                  http://www.dhteumeuleu.com

   ====================================================================================== */ 

 
id = function(o){return document.getElementById(o);} 

 
position = function(o, css){for(var i in css)o.style[i]=Math.round(css[i])+'px';} 

 
setOpacity = function(o,alpha){ 

	if(o.filters)o.filters.alpha.opacity = alpha*100; 

	else o.style.opacity = alpha; 

} 

 
diapo = { 

	N:0, 

	W:0, 

	H:0, 

	/////////////////// 

	image_ratio:4/3, 

	fsTitle:16, 

	fsText:8, 

	imgMargin:3, 

	butMargin:3, 

	/////////////////// 

	ims:0, 

	imx:[], 

	tit:[], 

	txt:[], 

	thu:0, 

	pos:0, 

	xc:0, 

	xd:0, 

	xm:0, 

	dt:0, 

	xs:0, 

	move:false, 

 
	slide:function(){ 

		with(this){ 

			// ===== scrolling loop ===== 

			xm += xs; 

			xc += (dt*xm*.0025); 

			id("slider").style.left = Math.round(xc)+"px"; 

			if (xm == 20) xs = -1; 

			if (xm) setTimeout("diapo.slide();", 16); 

			else { 

				// ===== enlighten pic ===== 

				for(var i=.5;i<=1;i+=.1)setTimeout("setOpacity(diapo.ims[diapo.pos], "+i+")", 160*i); 

				setTimeout("diapo.move=false", 160); 

			} 

		} 

	}, 

 
	cxd:function(p){ 

		with(this){ 

			// ===== calculates slider position ===== 

			if(W/H>image_ratio){ 

				wi = Math.round(H*(ims[p].width/ims[p].height)); 

				xd = -imx[p]+((W-wi)/2); 

			} else xd = -imx[p]; 

			// ===== display text ===== 

			thu[p].className = "selected"; 

			id("title").innerHTML = tit[p]; 

			id("txt").innerHTML = txt[p]; 

		} 

	}, 

 
	scroll:function(p){ 

		with(this){ 

			if(move){ 

				// ===== already scrolling: queue event ===== 

				setTimeout("diapo.scroll("+p+");", 128); 

			} else { 

				if(thu[p].className == "loaded"){ 

					// ===== start scrolling ===== 

					cxd(p); 

					setOpacity(ims[pos], .4); 

					thu[pos].className = "loaded"; 

					pos = p; 

					dt = xd-xc; 

					xm = 0; 

					xs = 1; 

					move = true; 

    				slide(); 

				} 

			} 

		} 

	}, 

 
	pos_button:function(x,y,w){ 

		with(this){ 

			// ===== button bar & text positioning ===== 

			position(id("button"), {'left':x,'top':y+butMargin,'width':w,'height':H/20}); 

			position(id("legend"), {'left':x,'top':y+(butMargin*2)+H/20,'width':w,'height':H}); 

			position(id("title"), {'fontSize':Math.max(12,H/(250/fsTitle))}); 

			position(id("txt"), {'fontSize':Math.max(6,H/(250/fsText)),'marginTop':.5*H/(250/fsText)}); 

			thu = id("button").getElementsByTagName("span"); 

			for(var i=0;i<N;i++){ 

				var wi = Math.round(w/N)-butMargin; 

				position(thu[i], {'left':(butMargin*.5)+i*(wi+butMargin),'width':wi}); 

				if(ims[i].complete)thu[i].className = (i==pos)?"selected":"loaded"; 

			} 

		} 

	}, 

 
	resize:function(){ 

		with(diapo){ 

			// ===== resize layout ===== 

			W=id("slider").offsetWidth; 

			H=id("slider").offsetHeight; 

			var w=0; 

			var h=0; 

			var x=0; 

			for(var i=0;i<N;i++){ 

				if(ims[i].complete){ 

					w=ims[i].width; 

					h=ims[i].height; 

					ims[i].style.visibility="visible"; 

					setOpacity(ims[i], (i==pos)?1:.4); 

					if(W/H>image_ratio){ 

						// ===== horizontal centering ===== 

						wi = Math.round(H*(w/h)); 

						position(ims[i], {'left':x,'top':0,'width':wi,'height':H}); 

						imx[i] = x; 

						x += wi+imgMargin; 

						if(i==0) pos_button((W-wi)/2,H,wi); 

					} else { 

						// ===== vertical centering ===== 

						hi = Math.round(W/(w/h)); 

						position(ims[i], {'left':x,'top':(H-hi)/2,'width':W,'height':hi}); 

						imx[i] = x; 

						x += W+imgMargin; 

						if(i==0) pos_button(0,hi+(H-hi)/2,W); 

					} 

				} 

				if(xs==0)xc=xd; 

			} 

			// ===== reajust scroll position ===== 

			if(!move){ 

				cxd(pos); 

				position(id("slider"), {'left':xd}); 

			} 

		} 

	}, 

 
	images_load:function(){ 

		with(this){ 

			// ===== loop until all images are loaded ===== 

			var M=0; 

			for(var i=0;i<N;i++) if(ims[i].complete) M++; 

			if(!move && ims[0].complete) resize(); 

			if(M<N || move) setTimeout("diapo.images_load();", 128); 

		} 

	}, 

 
	init:function(){ 

		with(this){ 

			// ===== images source ===== 

			ims = id("slider").getElementsByTagName("img"); 

			N = ims.length; 

			// ===== create buttons ===== 

			for(var i=0;i<N;i++) { 

				o = document.createElement("span"); 

				tit[i] = ims[i].title; 

				txt[i] = ims[i].alt; 

				ims[i].title = ""; 

				ims[i].alt = ""; 

				o.onmousedown = new Function("diapo.scroll("+i+");"); 

				id("button").appendChild(o); 

			} 

			images_load(); 

		} 

	} 

} 

 
</script> 

</head> 

 
<body> 


<script type="text/javascript"> 

// ===== start script while loading images ===== 

function dom_onload() { 

	if(id("slider")) diapo.init(); else setTimeout("dom_onload();", 128); 

} 

dom_onload(); 

// ===== window resize event ===== 

onresize = diapo.resize; 

// ================================================ 

</script> 

 
<div id="diapo"> 

	<div id="slider"> 

				
		<img title="M50  " alt="<M50>は古い工場をまるごと再利用した芸術エリア。アートギャラリーがいっぱい!" src="images/m2.jpg"> 


		<img title="M50  " alt="ジャイアント・コーン。シュールな空間" src="images/m7.jpg"> 


		<img title="M50  " alt="こういうおじさんいるよなぁ" src="images/m5.jpg"> 


		<img title="M50  " alt="看板もひとつの芸術" src="images/m6.jpg"> 


		<img title="M50  " alt="この人の作品が好きです。ZHOU FAN氏という1983年生のアーティスト" src="images/m8.jpg">

 
		<img title="M50  " alt="中華人民共和国なイメージ" src="images/m9.jpg">


<a href="http://www.aoharu-earth.com/shanghai_eturaku/eturaku2.html">


		<img title="Next  " alt="続いて<田子坊>というエリアへ" src="images/next1.jpg"></a>


	</div> 

	<div id="button"></div> 

	<div id="legend"> 

		<span id="title"></span> 

		<span id="txt"></span> 

	</div> 

</div> 

<div id="credit">


<a href="http://aoharu-earth.com/haru_in/haru_in/"><font color="ff3300">[HOME]</font></a>

<a href="http://www.aoharu-earth.com/shanghai_eturaku/eturaku2.html"><font color="ff3300">[田子坊編]</font></a>

<a href="http://www.aoharu-earth.com/shanghai_eturaku/eturaku3.html"><font color="ff3300">[新天地・外灘編]</font></a>

<a href="http://www.aoharu-earth.com/shanghai_eturaku/eturaku4.html"><font color="ff3300">[番外編]</font></a>

<br>

Copyright © haru.Japan . All rights reserved.


</div> 


</body> 

</html>