<html>
<head>
<title>Planungsbüro Elke von Hofen  --  Im Markgrund 25  --  49078 Osnabrück</title>
</head>
<body>

<script language="JavaScript" type="text/javascript">

var xmlHttpObject = false;
var xmlHttpObject1 = false;
var folder,folder2,folder3,folder4;

if (typeof XMLHttpRequest != 'undefined') 
{
    xmlHttpObject = new XMLHttpRequest();
	xmlHttpObject1 = new XMLHttpRequest();
	xmlHttpObject2 = new XMLHttpRequest();
}
if (!xmlHttpObject) 
{
    try 
    {
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");
		xmlHttpObject1 = new ActiveXObject("Msxml2.XMLHTTP");
		xmlHttpObject2 = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) 
    {
        try 
        {
            xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
			xmlHttpObject1 = new ActiveXObject("Microsoft.XMLHTTP");
			xmlHttpObject2 = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e) 
        {
            xmlHttpObject = null;
			xmlHttpObject1 = null;
			xmlHttpObject2 = null;
        }
    }
}

function loadContent(folder2)
{
    xmlHttpObject.open('get','Pics/' + folder2 + '/text.txt');
    xmlHttpObject.onreadystatechange = handleContent;
    xmlHttpObject.send(null);
	return false;
}

function loadTitel(folder3)
{
	xmlHttpObject1.open('get','Pics/' + folder3 + '/titel.txt');
    xmlHttpObject1.onreadystatechange = handleTitel;
    xmlHttpObject1.send(null);
	return false;
}
function loadadvise(folder4)
{
	xmlHttpObject2.open('get','Pics/' + folder4 + '/vorher.txt');
    xmlHttpObject2.onreadystatechange = handleadvise;
    xmlHttpObject2.send(null);
	return false;
}
	
function handleContent()
{

    if (xmlHttpObject.readyState == 4)
    {	
        document.getElementById('text').innerHTML = xmlHttpObject.responseText;
    }
}

function handleTitel()
{

    if (xmlHttpObject1.readyState == 4)
    {	
        document.getElementById('titel').innerHTML = xmlHttpObject1.responseText;
    }
}

function handleadvise()
{

    if (xmlHttpObject.readyState == 4)
    {	
        document.getElementById('vorher').innerHTML = xmlHttpObject2.responseText;
    }
}

function change(folder)
{

document.getElementById('Bild1').src='Pics/' + folder + '/Bild1.jpg';
document.getElementById('Bild2').src='Pics/' + folder + '/Bild2.jpg';
document.getElementById('Bild3').src='Pics/' + folder + '/Bild3.jpg';
document.getElementById('Bildl').src='Pics/' + folder + '/Bildl.jpg';
document.getElementById('Bildr').src='Pics/' + folder + '/Bildr.jpg';
var imgobj= new Image();
var src='Pics/' + folder + '/Bildr.jpg';

imgobj.onload=function()
{

var myHeight = imgobj.height;
var myWidth = imgobj.width;
if (myHeight>myWidth)
	{
	document.getElementById('Bildr').style.width='auto';
	document.getElementById('Bildr').style.height='100%';

	}
else
	{
	document.getElementById('Bildr').style.width='100%';
	document.getElementById('Bildr').style.height='auto';

	}
}
imgobj.src=src;

var imgobjl= new Image();
var srcl='Pics/' + folder + '/Bildl.jpg';
imgobjl.onload=function()
	{
	
	var myHeightl = imgobjl.height;
	var myWidthl = imgobjl.width;
	if (myHeightl>myWidthl)
		{

		document.getElementById('rl').style.width='14%';
		document.getElementById('rl').style.height='250px';
		document.getElementById('text').style.left= '0%';
		document.getElementById('text').style.width= '100%';

		}
	else
		{
		var x=myWidthl/myHeightl*200;
		var z=Math.floor(x-250);
	
		var y=z + 'px';
		document.getElementById('rl').style.width='37%';
		document.getElementById('rl').style.height='250px';
		document.getElementById('text').style.left= '50%';
		document.getElementById('text').style.width= '50%';

		}
	}
imgobjl.src=srcl;


var imgobj1= new Image();
var src1='Pics/' + folder + '/Bild1.jpg';
imgobj1.onload=function()
	{
	
	var myHeight1 = imgobj1.height;
	var myWidth1 = imgobj1.width;
	var rel1=myWidth1/myHeight1;
	//alert(rel1);
	if (rel1>=100)
		{
		//alert('das ist doch kein richtiges Bild');
		document.getElementById('r1').style.visibility='hidden';
		}
	else
		{
		//alert('das ist ein richtiges Bild');
		document.getElementById('r1').style.visibility='visible';
		}

	}
imgobj1.src=src1;


var imgobj2= new Image();
var src2='Pics/' + folder + '/Bild2.jpg';
imgobj2.onload=function()
	{
	
	var myHeight2 = imgobj2.height;
	var myWidth2 = imgobj2.width;
	var rel2=myWidth2/myHeight2;
	//alert(rel2);
	if (rel2>=100)
		{
		//alert('das ist doch kein richtiges Bild');
		document.getElementById('r2').style.visibility='hidden';
		}
	else
		{
		//alert('das ist ein richtiges Bild');
		document.getElementById('r2').style.visibility='visible';
		}

	}
imgobj2.src=src2;


var imgobj3= new Image();
var src3='Pics/' + folder + '/Bild3.jpg';
imgobj3.onload=function()
	{
	
	var myHeight3 = imgobj3.height;
	var myWidth3 = imgobj3.width;
	var rel3=myWidth3/myHeight3;
	//alert(rel3);
	if (rel3>=100)
		{
		//alert('das ist doch kein richtiges Bild');
		document.getElementById('r3').style.visibility='hidden';
		}
	else
		{
		//alert('das ist ein richtiges Bild');
		document.getElementById('r3').style.visibility='visible';
		}

	}
imgobj3.src=src3;


loadContent(folder);
loadTitel(folder);
loadadvise(folder);

}


function p(id)
	{
	poff(id);
	}
	
	
function pon(id)
	{
	document.getElementById('m' + id).style.height = "100px"; 
	var c=1,j;
	var i=id;
	while(c<=1)
		{
		j=i+c;
		document.getElementById('m' + j).style.visibility = "visible";
		
		c++;
		}
	//document.getElementById('Maske').style.z-index = "1";
	}

function poff(id)
	{
	var d=110,m,n,k,l;
	while(d<=150)
		{
		document.getElementById('m' + d).style.height = "20px";
		
		d=d+10;
		}
	//document.getElementById('Maske').style.z-index = "1";
	m=110;
	while(m<=150)	
		{
		
		if (m==id)
			{
			
			}
		else
			{
		
			n=1;
			k=m;
			while(n<=1)
				{
				l=k+n;
				
				document.getElementById('m' + l).style.visibility = "hidden";
				n++;
				}
			}
		m=m+10;
		} 
	pon(id);
	}

function pof()
	{
	//document.getElementById('Maske').style.z-index = "6";
	var d=110,m,n,k,l;
	while(d<=150)
		{
		document.getElementById('m' + d).style.height = "20px";
		d=d+10;
		}
	m=110;
	while(m<=150)	
		{
			n=1;
			k=m;
			while(n<=1)
				{
				l=k+n;
				
				document.getElementById('m' + l).style.visibility = "hidden";
				n++;
				}
		m=m+10;
		}
	
	}
</script>


<div id="BALKEN" style="border: 0px solid #AD020B; background-color: #AD020B; padding: 0px; font-size: 13px; font-family: Arial; position: absolute; bottom:0px; top:0px; right:0px; width: 28%; z-index:0; height:100%; visibility:visible"> 
<span  id="TOP" style="border: 0px solid #000000; padding: 0px; color:#ffffff; text-align: center; font-size: 26px; font-family: Arial; position:absolute; top:6%;  left:0px; right:0px; width:100%; visibility:visible">Landschaftsarchitektur</span>	</div>
<span  id="BOTTOM" style="border: 0px solid #000000; padding: 0px; text-align: center; color:#ffffff;  font-size: 22px; font-family: Arial; position:absolute; bottom:10%; right:0%; height:auto; width:28%; visibility:visible"><a style="text-decoration: none; text-align: center; font-family:'Arial'; Font-weight:normal; Font-size:22px;  color:#ffffff">Planungsbüro von Hofen </a></span>
<div id="INHALT" style="border: 0px solid #000000;  padding: 0px; font-size: 13px; font-family: Arial; position: absolute; bottom:10%; top:10%; right:0px; width: 100%; z-index:0; height:80%; visibility:visible"> 
</div>

<div style="border: 0px solid #000000;  padding: 0px; font-size: 13px; font-family: Arial; z-index:5; position: absolute;  bottom:0%; left:0px; width: 100%; height:20%">
<a href="index.html" style="position:absolute; bottom:10%; left:2%; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b">zurück </a>
<a href="impressum.html" style="position:absolute; bottom:10%; left:10%; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b">Impressum </a>
<a href="disclaimer.html" style="position:absolute; bottom:10%; left:18%; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b">Disclaimer </a></div>


<!-- projekte //-->
<div id="2" style="border: 0px solid #000000;  padding: 0px; font-size: 13px; font-family: Arial; position: absolute; top:0%; left:0px; width: 100%; height:20%; z-index:4; visibility:visible">
<table  style="border: 0px solid #000000;  padding: 0px; font-size: 13px; font-family: Arial; position: fixed; top: 5%; left:2%; right:30%;width:70%; bottom:0%;" >
<tr height="80%">
<td width="2%"></td>
<td width="96%">


<!-- hier beginnt das Menü mit den Privatgärten//-->
<div style="border:0px solid #AD020B; position:relative; top:0%; left:0%; z-index:6;right:1%; color:#AD020B; width:100%; height:40px">
<div id="m110" onmouseover="p(110);" onmouseout="pof();" style="text-decoration: none; font-size:16;font-family:'Arial';border:0px solid #AD020B; position:absolute; top:0%; left:0%; bottom:1%; right:1%; color:#AD020B; width:20%; z-index:7; height:20px"><a><font style="font-size:26px;">&#9632; </font>Privatgärten</a>
<div id="m111" style="border:0px solid #AD020B; padding: 12%; background-color:#eeeeee; position:absolute;font-size:15; top:45px; left:0%; z-index:7; width:Auto; height: Auto;color:#AD020B; visibility:hidden"><a href="#" onclick="change('Stadt');pof();" style="text-decoration: none; color:#ad020b" >Stadtgarten</a><br><br><a href="#" onclick="change('lotte');pof();" style="text-decoration: none; color:#ad020b" >Garten in Lotte</a><br><br><a href='#' onclick="change('kunst');pof();" style="text-decoration: none; color:#ad020b" >Künstlergarten</a><br><br><a href='#' onclick="change('land');pof();" style="text-decoration: none; color:#ad020b" >Landhausgarten</a>
<br><br><a href='#' onclick="change('familie');pof();" style="text-decoration: none; color:#ad020b" >Familiengarten</a>
</div>
</div>


<!-- Außenanlagen//-->
<div id="m120" onmouseover="p(120);" onmouseout="pof();" style="text-decoration: none; font-size:16;font-family:'Arial';border:0px solid #AD020B;color:#AD020B; position:absolute; top:1%; left:20%; bottom:1%; right:1%; width:20%;z-index:9; height: 20px"><a><font style="font-size:26px;">&#9632; </font>Außenanlagen</a>

<div id="m121" style="border:0px solid #AD020B; padding: 12%; background-color:#eeeeee; position:absolute;font-size:15; top:45px; left:0%; z-index:9;  width:Auto; height: Auto;color:#AD020B; visibility:hidden"><a href='#' onclick="change('Ahorn');pof();" style="text-decoration: none; color:#ad020b">Ahornweg</a><br><br><a href='#' onclick="change('sb');pof();" style="text-decoration: none; color:#ad020b">Museum <br>Schnippenburg</a><br><br><a href='#' onclick="change('krippe');pof();" style="text-decoration: none; color:#ad020b">Marienkrippe</a><br><br><a href='#' onclick="change('knoten');pof();" style="text-decoration: none; color:#ad020b">Knotengarten</a></div>

</div>


<!-- Dachterassen //-->
<div id="m130" onmouseover="p(130);"  onmouseout="pof();" style="text-decoration: none; font-size:16;font-family:'Arial';border:0px solid #AD020B;color:#AD020B; position:absolute; top:1%; left:40%; bottom:1%; right:1%; width:20%; z-index:9; height: 20px"><a><font style="font-size:26px;">&#9632; </font>Dachterrassen</a>

<div id="m131" style="border:0px solid #AD020B; padding: 12%; background-color:#eeeeee; position:absolute;font-size:15; top:45px; left:0%; z-index:9; width:Auto; height: Auto;color:#AD020B; visibility:hidden"><a href="#" onclick="change('hdu');pof();" style="text-decoration: none; color:#ad020b">Osnabrück</a><br><br><a onclick="pof();">Private Dachterasse</a></div>
</div>

<!-- Wettbewerbe //-->
<div id="m140" onmouseover="p(140);" onmouseout="pof();" style="text-decoration: none;font-size:16; font-family:'Arial';border:0px solid #AD020B;color:#AD020B; position:absolute; top:1%; left:60%; bottom:1%; right:1%; width:20%; z-index:9; height: 20px"><a><font style="font-size:26px;">&#9632; </font>Wettbewerbe</a>
<div id="m141" style="border:0px solid #AD020B; padding: 12%; background-color:#eeeeee; position:absolute;font-size:15; top:45px; left:0%; z-index:9; width:Auto; height: Auto;color:#AD020B; visibility:hidden"><a onclick="pof();">Lingen</a><br><br><a onclick="pof();">Düsseldorf repariert</a></div>
</div>

<!-- Innenhöfe //-->
<div id="m150" onmouseover="p(150);"  onmouseout="pof();" style="text-decoration: none;font-size:16; font-family:'Arial';border:0px solid #AD020B;color:#AD020B; position:absolute; top:1%; left:80%; bottom:1%; right:1%; width:20%; z-index:9; height: 20px"><a><font style="font-size:26px;">&#9632; </font>Innenhöfe</a>
<div id="m151" style="border:0px solid #AD020B; padding: 12%; background-color:#eeeeee; position:absolute;font-size:15; top:45px; left:0%;  width:Auto; z-index:2; height: Auto;color:#AD020B; visibility:hidden"><a href="#" onclick="change('Uni1'); pof();" style="text-decoration: none; color:#ad020b" >Universität 1</a><br><br><a href="#" onclick="change('Uni2');pof();" style="text-decoration: none; color:#ad020b" >Universität 2</a><br><br><a href="#" onclick="change('FH');;pof();" style="text-decoration: none; color:#ad020b" >Franziskushospital</a><br><br><a href='#' onclick="change('AL');pof();" style="text-decoration: none; color:#ad020b" >Annas Lädchen</a></div>
</div>
</div>
</td>

<td width="2%"></td>
</tr>


<tr height="10%">
</tr>


</table>
</div>

<!-- Ende Projektmenü //-->

<!-- Vorlage mit Uni 1 als Start //-->
<div id="Maske" style="border: 0px solid #000000; margin: 0px;  padding: 0px; font-size: 13px; font-family: Arial; position: absolute; top:20%; z-index:3; right:0px; width: 100%; height:70%; visibility:visible">

<!-- Bild 1 //-->
<div id="rr" style="border:0px solid #000000; position:absolute; width:20%; height:250px; top:0%; left:76%; right:4%; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b"><center><img id="Bildr" src="Pics/Uni1/Bildr.jpg" style="border:1px solid #ffffff;width:100%;height:auto"></center></div>

<!-- Bild 2 //-->
<div id="rl" style="border:1px solid #ad020b; position:absolute; width:14%; height:250px; top:0%; left:5%; right:8%; bottom:15% ; overflow:hidden; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b;z-index:3"><img id="Bildl" src="Pics/Uni1/Bildl.jpg" style="position:absolute;border:px solid #ad020b;width:100%; height:auto"></div>

<!-- Bild 3 //-->
<div id="r1" style="border:0px solid #000000; position:absolute; width:14%; height:auto; top:60%; left:5%; right:8%; bottom:15%; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
<img id="Bild1" src="Pics/Uni1/Bild1.jpg" style="border:1px solid #ad020b;width:100%; position:relative; top:auto; bottom:0%">
<div style="border:0px solid #000000; margin:0px; padding:0px; position:absolute; width:Auto; height: auto; top:10%; left:6%; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ffffff"><p id="vorher" style="margin:0px; padding:1px; top:0px;  text-decoration: none; font-family:'Arial'; text-align:left; Font-weight:bold; Font-size:15; color:#ffffff; ">vorher</p></div>
</div>

<!-- Bild 4 //-->
<div id="r2" style="border:0px solid #000000; position:absolute; width:14%; height:auto; top:60%; left:28%; right:8%; bottom:15% ; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b"><img id="Bild2"  src="Pics/Uni1/Bild2.jpg" style="border:1px solid #ad020b;width:100%"></div>

<!-- Bild 5 //-->
<div id="r3" style="border:0px solid #000000; position:absolute; width:14%; height:auto; top:60%; left:51%; right:8%; bottom:15% ; text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b"><img id="Bild3" src="Pics/Uni1/Bild3.jpg" style="border:1px solid #ad020b;width:100%"></div>

<!--vorher //-->


<!-- Text uni1 //-->
<div  style="border:0px solid #000000; margin:0px; padding:0px; position:absolute; width:37%; height: 250px; top:0%; left:28%; right:35%;  text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
	<textarea id="text" scrolling="on" style="border:0px solid #556677; margin:0px; padding:0px; position:absolute; top:0px; width:100%; height:100%; left:0%; right:0%;  text-decoration: none; font-family:'Arial'; text-align:left; Font-weight:normal; Font-size:16; color:#333333; ">Der Innenhof der Universität Osnabrück befindet sich im 1. Obergeschoss eines Erweiterungsgebäudes und wurde 2005 mit dem Ziel neu gestaltet, das angrenzende 
neue Medienstudio des Audiovisuellen Medienzentrums zu verschatten und ein ansprechendes Ambiente mit hoher Aufenthaltsqualität zu schaffen.
Entstanden ist ein Raum im asiatischen Stil mit Holzelementen, Kies  und Bambus. Eine verspiegelte Platte stellt das Element Wasser dar, die Verschattung erfolgt über abnehmbare Sonnensegel..</textarea>

</div>
<div style="border:0px solid #000000; margin:0px; padding:0px; position:absolute; width:Auto; height:auto; bottom:0%; left:5%; right:35%;  text-decoration: none; font-family:'Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
	<p id="titel" style="margin:0px; padding:0px; top:0px;  text-decoration: none; font-family:'Arial'; text-align:left; Font-weight:normal; Font-size:20; color:#AD020B; ">Universität Osnabrück - Erweiterungsgebäude</p>

</div>

</div>


<!-- Ende Uni 1 //-->


</body>
</html>