<style type="text/css">

/* needed for IE to make :active state work first time */
a, a:visited {color:#000;} 

/* common styling for all galleries */
a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;}
a.slidea {background:url(london/thumb2.jpg);}
a.slideb {background:url(london/thumb3.jpg);}
a.slidec {background:url(london/thumb4.jpg);}
a.slided {background:url(london/thumb5.jpg);}
a.slidee {background:url(london/thumb6.jpg);}
a.slidef {background:url(london/thumb7.jpg);}
a.slideg {background:url(london/thumb8.jpg);}
a.slideh {background:url(london/thumb9.jpg);}
a.slidei {background:url(london/thumb10.jpg);}
a.slidej {background:url(london/thumb11.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border:1px solid #fff;}

/* styling for RIGHT gallery */
#container_right {position:relative; width:600px; height:305px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}
#container_right img {border:0;}
#container_right .thumbs {width:170px; position:absolute; right:0; top:0;}
#container_right a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:-430px; padding:5px; font-style:italic; color:#fff;  z-index:100;}
#container_right a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_right a.gallery:active, #container_right a.gallery:focus {border:1px solid #000;}
#container_right a.gallery:active em, #container_right a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:5px; left:-425px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}
#container_right h1 {clear:both; margin:0; padding-top:80px; padding-left:50px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}
#container_right h1 em {font-size:0.6em; color:#000;}

</style>

<h3>Thumbnails at right</h3>
<div id="container_right">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="london/pic2.jpg" alt="LSE Square" title="LSE Square" /></em><span>LSE Square<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideb" href="#nogo"><em><img src="london/pic3.jpg" alt="Buckingham Palace" title="Buckingham Palace" /></em><span>Buckingham Palace<br />Photographs courtesy of stock.xchng</span></a>

<a class="gallery slidec" href="#nogo"><em><img src="london/pic4.jpg" alt="Tower Bridge" title="Tower Bridge" /></em><span>Tower Bridge<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slided" href="#nogo"><em><img src="london/pic5.jpg" alt="Tower of London" title="Tower of London" /></em><span>Tower of London<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidee" href="#nogo"><em><img src="london/pic6.jpg" alt="Houses of Parliament" title="Houses of Parliament" /></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidef" href="#nogo"><em><img src="london/pic7.jpg" alt="St. Paul's Cathedral" title="St. Paul's Cathedral" /></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideg" href="#nogo"><em><img src="london/pic8.jpg" alt="The London Eye" title="The London Eye" /></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideh" href="#nogo"><em><img src="london/pic9.jpg" alt="Albert Hall" title="Albert Hall" /></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>

<a class="gallery slidei" href="#nogo"><em><img src="london/pic10.jpg" alt="Wandsworth Common" title="Wandsworth Common" /></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidej" href="#nogo"><em><img src="london/pic11.jpg" alt="London Taxi Cab" title="London Taxi Cab" /></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
</div>
<h1>Views<br /><em>of</em><br />London</h1>
</div>

@charset "UTF-8";
/* CSS Document */

a.gallery,
a.gallery:visited
{
	display:block;
	display:inline-block;
	color:#FFF;
	text-decoration:none;
	border:2px solid #FFF;
	width:148px;
	height:82px;
	float:left;
	z-index:50;
	margin-bottom:-2px;
}
/*
a.slidea
{	background:url(../gfx/mpic_001.png);	}

a.slideb
{	background:url(../gfx/mpic_002.png);	}

a.slidec
{	background:url(../gfx/mpic_003.png);	}
*/
a.gallery em,
a.gallery span
{
	display:none;
}

a.gallery:hover
{
	border:2px solid white;
	margin-bottom:-2px;
}

#container_right
{
	position:relative;
	width:599px;
	right:1px;
	height:250px;
	background:url(../gfx/logo.gif) no-repeat 25% 50% #cfd0c8;
	border-bottom:2px solid white;	
	float:right;
}

#container_right img
{	border:0;	}

#container_right .thumbs
{
	width:150px;
	position:absolute;
	left:449px;
	top:-2px;
}

#container_right a.gallery:hover span:first-line
{
	font-style:normal;
	font-weight:bold;
	color:#FFF;
}

#container_right a.gallery:active,
#container_right a.gallery:focus
{
	border:2px solid #FFF;
}

#container_right a.gallery:active em,
#container_right a.gallery:focus em
{
	display:block;
	position:absolute;
	width:448px;
	height:250px;
	top:2px;
	left:-448px;
	color:#000;
	z-index:50;
}

<div id="container_right">
<div class="thumbs">
<a class="gallery" style="background: url('txt/ferienwohnungen/bilder/mpic_<?php echo $id; ?>_001.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id; ?>_001.png" /></em></a>
<a class="gallery" style="background: url('txt/ferienwohnungen/bilder/mpic_<?php echo $id; ?>_002.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id; ?>_002.png" /></em></a>
<a class="gallery" style="background: url('txt/ferienwohnungen/bilder/mpic_<?php echo $id; ?>_003.png');" href="#"><em><img src="txt/ferienwohnungen/bilder/pic_<?php echo $id; ?>_003.png" /></em></a>
</div>
</div>