<html>
<head>
<title>Planungsbüro von Hofen - Projekte</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:'century gothic',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: 35px; font-family:'century gothic',Arial; position:absolute; top:6%;  left:0px; right:0px; width:100%; visibility:visible">Landschaftsarchitektur<br>Stadtplanung</span>	</div>
<span  id="BOTTOM" style="border: 0px solid #000000; padding: 0px; text-align: center; color:#ffffff;  font-size: 22px; font-family:  'century gothic',Arial; position:absolute; bottom:10%; right:0%; height:auto; width:28%; visibility:visible"><a style="text-decoration: none; text-align: center; font-family:'century gothic',Arial; Font-weight:normal; Font-size:35px;  color:#ffffff">Planungsbüro von Hofen </a></span>
<div id="INHALT" style="border: 0px solid #000000;  padding: 0px; font-size: 13px; font-family:  'century gothic',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:  'century gothic',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:' 'century gothic',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:' 'century gothic',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:' 'century gothic',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:  'century gothic',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:  'century gothic',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ü //-->
<div style="border:0px solid #AD020B; position:relative; top:0%; left:0%; z-index:6;right:1%; color:#AD020B; width:100%; height:40px">


<!-- Privatgärten//-->
<div id="m110" onmouseover="p(110);" onmouseout="pof();" style="text-decoration: none; font-size:16;font-family:'century gothic','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('familiegarten');pof();" style="text-decoration: none; color:#ad020b" >Familiengarten</a><br><br>
<a href="#" onclick="change('landhausgarten');pof();" style="text-decoration: none; color:#ad020b" >Landhausgarten</a><br><br>
<a href="#" onclick="change('stadtgarten');pof();" style="text-decoration: none; color:#ad020b" >Stadtgarten</a><br><br>
<a href="#" onclick="change('reihenhausgarten');pof();" style="text-decoration: none; color:#ad020b" >Reihenhausgarten</a><br></div>
</div>
</div>


<!-- Außenanlagen//-->
<div id="m120" onmouseover="p(120);" onmouseout="pof();" style="text-decoration: none; font-size:16;font-family:'century gothic','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('averbeck');pof();" style="text-decoration: none; color:#ad020b">Averbecks Hof</a><br><br>
<a href='#' onclick="change('kitaiburg');pof();" style="text-decoration: none; color:#ad020b">KiTa St. Nikolaus Bad Iburg</a><br><br>
<a href='#' onclick="change('kreisel glane');pof();" style="text-decoration: none; color:#ad020b">Kreiselgestaltung Glane</a><br><br>
<a href='#' onclick="change('schnippenburg');pof();" style="text-decoration: none; color:#ad020b">Museum <br>Schnippenburg</a><br><br>
<a href='#' onclick="change('christophorus');pof();" style="text-decoration: none; color:#ad020b">St. Christophorus Kirche Vörden</a><br><br>
<a href='#' onclick="change('terravita');pof();" style="text-decoration: none; color:#ad020b">Terra.vita Pavillon</a><br>

</div>
</div>


<!-- Plätze //-->
<div id="m130" onmouseover="p(130);"  onmouseout="pof();" style="text-decoration: none; font-size:16;font-family:'century gothic','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>Plätze</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('ehrenmal');pof();" style="text-decoration: none; color:#ad020b">Glaner Ehrenmal</a><br><br>
<a href="#" onclick="change('rathausplatz');pof();" style="text-decoration: none; color:#ad020b">Rathausplatz Bad Iburg</a><br><br>
<a href="#" onclick="change('thieplatz');pof();" style="text-decoration: none; color:#ad020b">Thieplatz Glane</a><br>

</div>
</div>


<!-- Grünanlagen //-->
<div id="m140" onmouseover="p(140);" onmouseout="pof();" style="text-decoration: none;font-size:16; font-family:'century gothic','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>Grünanlagen</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 href='#' onclick="change('knotengarten');pof();" style="text-decoration: none; color:#ad020b">Knotengarten Bad Iburg</a><br><br>
<a href='#' onclick="change('mühlenweg');pof();" style="text-decoration: none; color:#ad020b">Mühlenweg Glane</a><br><br>
<a href='#' onclick="change('pomarium');pof();" style="text-decoration: none; color:#ad020b">Pomarium Bad Iburg</a><br><br></div>
</div>
</div>

<!-- Stadtplanung //-->
<div id="m150" onmouseover="p(150);"  onmouseout="pof();" style="text-decoration: none;font-size:16; font-family:'century gothic','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>Stadtplanung</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('Baustelle'); pof();" style="text-decoration: none; color:#ad020b" >Demnächst hier aktuelle Projekte!</a><br></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: 'century gothic','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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
<center>
<img id="Bildr" src="Pics/startseiteprojekte/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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ad020b;z-index:3">
<img id="Bildl" src="Pics/startseiteprojekte/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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
<img id="Bild1" src="Pics/startseiteprojekte/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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ffffff">
<p id="vorher" style="margin:0px; padding:1px; top:0px;  text-decoration: none; font-family:'century gothic','Arial'; text-align:left; Font-weight:bold; Font-size:15; color:#ffffff; "></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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
<img id="Bild2"  src="Pics/startseiteprojekte/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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
<img id="Bild3" src="Pics/startseiteprojekte/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:'century gothic','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:'century gothic','Arial'; text-align:left; Font-weight:normal; Font-size:16; color:#333333; ">Auf dieser Seite finden Sie eine kleine Auswahl unterschiedlichster Projekte, die wir für verschiedene Auftraggeber im Osnabrücker Land durchgeführt haben. 

Unser Leistungsspektrum reicht von Freiraumplanung, Privatgärten und Grünanlagen bis hin zu Plätzen sowie Außenanlagen.

Durch unsere langjährige Erfahrung können wir Ihnen eine professionelle und umfangreiche Betreuung während aller Phasen Ihres Projektes anbieten und würden uns freuen als nächstes Ihren Gartentraum in die Tat umzusetzen.</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:'century gothic','Arial'; Font-weight:normal; Font-size:14; color:#ad020b">
	<p id="titel" style="margin:0px; padding:0px; top:0px;  text-decoration: none; font-family:'century gothic','Arial'; text-align:left; Font-weight:normal; Font-size:20; color:#AD020B; ">Projektübersicht</p>

</div>

</div>


<!-- Ende Uni 1 //-->



</body>
</html>