Team:Heidelberg/Gallery

From 2009.igem.org

(Difference between revisions)
Line 1: Line 1:
{{Template_HD_3}}
{{Template_HD_3}}
-
<html><body id="team">
+
<html>
-
 
+
<style type="text/css">
<style type="text/css">
-
#container {
 
-
        padding:20px 0 20px 0;
 
-
width: 600px;
 
-
}
 
-
#mainContent{
 
-
width: 400px;
 
-
float: left;
 
-
}
 
-
#thumbsbar{
 
-
width: 200px;
 
-
float:left;
 
-
}
 
-
</style>
 
-
 
-
<script><!--
 
-
function MM_preloadImages() { //v3.0
 
-
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
 
-
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
 
-
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
 
-
}
 
-
function MM_swapImgRestore() { //v3.0
+
#menu {position:relative; width:600px;}
-
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
+
-
}
+
-
function MM_findObj(n, d) { //v4.01
+
#menu a.p1:visited, #menu a.p2:visited, #menu a.p3:visited, #menu a.p4:visited, #menu a.p5:visited, #menu a.p6:visited, #menu a.p7:visited, #menu a.p8:visited, #menu a.p9:visited {position:absolute; display:block; width:50px; height:50px; background-color:#949e7c; color:#fff; text-decoration:none;}
-
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
+
-
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
+
-
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
+
-
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
+
-
  if(!x && d.getElementById) x=d.getElementById(n); return x;
+
-
}
+
-
function MM_swapImage() { //v3.0
+
#menu a.p1:visited {top:0px; left:0px;}
-
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
+
#menu a.p2:visited {top:0px; left:55px;}
-
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
+
#menu a.p3:visited {top:0px; left:110px;}
-
}
+
#menu a.p4:visited {top:55px; left:0px;}
-
//-->
+
#menu a.p5:visited {top:55px; left:55px;}
-
</script>
+
#menu a.p6:visited {top:55px; left:110px;}
 +
#menu a.p7:visited {top:110px; left:0px;}
 +
#menu a.p8:visited {top:110px; left:55px;}
 +
#menu a.p9:visited {top:110px; left:110px;}
 +
#menu a.p1, #menu a.p2, #menu a.p3, #menu a.p4, #menu a.p5, #menu a.p6, #menu a.p7, #menu a.p8, #menu a.p9 {position:absolute; display:block; width:50px; height:50px; background-color:#949e7c; color:#fff; text-decoration:none;}
-
<div id="super_main_wrapper">
+
#menu a.p1 {top:0px; left:0px; background-image: url("http://grants.nih.gov/grants/partners/NexusImages/science.jpg");}
-
<div id="SubWrapper"
+
#menu a.p2 {top:0px; left:55px; background-image: url("http://parts2.mit.edu/wiki/images/0/04/IGem.jpg");}
-
<h3> iGEM Gallery </h3>
+
#menu a.p3 {top:0px; left:110px; background-image: url("http://www.bio.davidson.edu/projects/GCAT/Synthetic/Igem_from_above_cropped.jpg");}
 +
#menu a.p4 {top:55px; left:0px; background-image: url("http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg");}
 +
#menu a.p5 {top:55px; left:55px; background-image: url("http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg");}
 +
#menu a.p6 {top:55px; left:110px; background-image: url("http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg");}
 +
#menu a.p7 {top:110px; left:0px; background-image: url("http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg");}
 +
#menu a.p8 {top:110px; left:55px; background-image: url("http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg");}
 +
#menu a.p9 {top:110px; left:110px; background-image: url("http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg");}
-
<!-- HERE STARTS THE GALLERY -->
 
-
<center>
+
#menu a.p1:hover, #menu a.p2:hover, #menu a.p3:hover, #menu a.p4:hover, #menu a.p5:hover, #menu a.p6:hover, #menu a.p7:hover, #menu a.p8:hover, #menu a.p9:hover {text-decoration:none; background-color:#d4d8bd; color:#000;}
-
<div id="container">
+
-
 
+
-
  <div id="thumbsbar">
+
-
  <a href="javascript:;" onmouseover="MM_swapImage('mainimage','','http://www2.uni-erfurt.de/mikrooekonomie/bilder/titelbilder/science_312gr.gif',1)"onmouseout="MM_swapImgRestore()"><img src="http://www2.uni-erfurt.de/mikrooekonomie/bilder/titelbilder/science_312gr.gif" width="60" height="60"/></a>
+
-
  <a href="javascript:;" onmouseover="MM_swapImage('mainimage','','http://www.funcaptain.de/wp-content/uploads/2008/05/modern-science.jpg',1)"onmouseout="MM_swapImgRestore()"><img src="http://www.funcaptain.de/wp-content/uploads/2008/05/modern-science.jpg" width="60" height="60" /></a>
+
#menu a img {display:block; position:absolute; width:1px; height:1px; border:0px; top:0px; left:0px;}
-
  <a href="javascript:;" onmouseover="MM_swapImage('mainimage','','http://www.fuenf-filmfreunde.de/wp-content/uploads/2006/08/science.jpg',1)"onmouseout="MM_swapImgRestore()"><img src="http://www.fuenf-filmfreunde.de/wp-content/uploads/2006/08/science.jpg" width="60" height="60" /></a>
+
#menu a.p1:hover img {display:block; position:absolute; top:0px; left:200px; width:300px; height: auto; border:0px;}
-
  </div>
+
#menu a.p2:hover img {display:block; position:absolute; top:0px; left:145px; width:300px; height: auto; border:0px;}
 +
#menu a.p3:hover img {display:block; position:absolute; top:0px; left:90px; width:300px; height: auto; border:0px;}
 +
#menu a.p4:hover img {display:block; position:absolute; top:-55px; left:200px; width:300px; height: auto; border:0px;}
 +
#menu a.p5:hover img {display:block; position:absolute; top:-55px; left:145px; width:300px; height: auto; border:0px;}
 +
#menu a.p6:hover img {display:block; position:absolute; top:-55px; left:90px; width:300px; height: auto; border:0px;}
 +
#menu a.p7:hover img {display:block; position:absolute; top:-110px; left:200px; width:300px; height: auto; border:0px;}
 +
#menu a.p8:hover img {display:block; position:absolute; top:-110px; left:145px; width:300px; height: auto; border:0px;}
 +
#menu a.p9:hover img {display:block; position:absolute; top:-110px; left:90px; width:300px; height: auto; border:0px;}
-
<div id="mainContent">
 
-
    <div id="enlargedImage"><img src="http://www.fuenf-filmfreunde.de/wp-content/uploads/2006/08/science.jpg" alt="mainimage" name="mainimage" width="300"
 
-
    id="mainimage" /></div>
 
-
  </div>
 
-
</div> <!-- End Container -->
+
#mainimage {position:absolute; left:200px; top:0px; width:300px; border:0px;}
-
</center>
+
 
-
<!-- END OF GALLERY -->
+
 
 +
</style>
 +
<body id="team">
 +
<h3>iGEM Team Heidelberg: Gallery</h3>
-
</div> <!-- end SubWrapper -->
+
<div id="menu">
-
<div id="news">  
+
<!-- das zuerst angezeigte Bild -->
 +
<img id="mainimage" src="http://www.bio.davidson.edu/projects/GCAT/Synthetic/Igem_from_above_cropped.jpg" />
-
<br>
+
<!-- alle anderen Bilder -->
-
<br>
+
<a class="p1" href="#nogo">&nbsp;1<img src="http://grants.nih.gov/grants/partners/NexusImages/science.jpg"/></a>
-
</div> <!-- end news -->
+
<a class="p2" href="#nogo">&nbsp;2<img src="http://parts2.mit.edu/wiki/images/0/04/IGem.jpg"/></a>
-
</div> <!-- end Super_main_wrapper -->
+
<a class="p3" href="#nogo">&nbsp;3<img src="http://www.bio.davidson.edu/projects/GCAT/Synthetic/Igem_from_above_cropped.jpg"/></a>
 +
<a class="p4" href="#nogo">&nbsp;4<img src="http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg"/></a>
 +
<a class="p5" href="#nogo">&nbsp;5<img src="http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg"/></a>
 +
<a class="p6" href="#nogo">&nbsp;6<img src="http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg"/></a>
 +
<a class="p7" href="#nogo">&nbsp;7<img src="http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg"/></a>
 +
<a class="p8" href="#nogo">&nbsp;8<img src="http://parts.mit.edu/wiki/images/4/4c/IGEM-2006-From-Above-800w.jpg"/></a>
 +
</div>
</body></html>
</body></html>

Revision as of 08:10, 16 October 2009

iGEM Team Heidelberg: Gallery