Team:Imperial College London/Project

function haxbackground{ document.getElementById('cartoonmap').style.backgroundImage='url(/wiki/images/7/7a/NYMU_main_pic_965px-bw.png)'; } function unhaxbackground{ document.getElementById('cartoonmap').style.backgroundImage="url('/wiki/images/c/c5/NYMU_main_pic_965px.png')"; } dl#cartoonmap{ background:url(http://2009.igem.org/Image:II09_TimelineText.png) transparent top left no-repeat; display:block; position:relative; width:965px; height:708px; margin:0px;

border:1px solid gray; } dl#cartoonmap dt{ display:none; }

/* Common stuff between links */ dl#cartoonmap dd a{	position:absolute;

border:1px dashed silver; text-decoration: none; } dl#cartoonmap dd a span{ display:none; }

/* link positions (x,y,w,h) */ dl#cartoonmap dd#ph a{ left:50px; bottom:85px; width:135px; height:370px; z-index:200;} dl#cartoonmap dd#at a{ left:185px; bottom:85px; width:120px; height:200px; z-index:200;} dl#cartoonmap dd#u a{ left:305px; bottom:85px; width:100px; height:200px; z-index:200;} dl#cartoonmap dd#g a{ left:405px; bottom:85px; width:105px; height:200px; z-index:200;} dl#cartoonmap dd#p a{ left:510px; bottom:85px; width:110px; height:200px; z-index:200;} dl#cartoonmap dd#time a{ left:620px; bottom:85px; width:230px; height:200px; z-index:100;}

/* link hover doings */ dl#cartoonmap dd a:hover{ border-style:solid; border-width:1px; background:url('/wiki/images/c/c5/NYMU_main_pic_965px.png') transparent top left no-repeat; } /* colored borders! */ dl#cartoonmap dd#ph a:hover, dl#cartoonmap dd#ph a:hover span, dl#cartoonmap dd#ph a:hover span div.first{ border-color:violet; } dl#cartoonmap dd#at a:hover, dl#cartoonmap dd#at a:hover span, dl#cartoonmap dd#at a:hover span div.first{ border-color:orange; } dl#cartoonmap dd#u a:hover, dl#cartoonmap dd#u a:hover span, dl#cartoonmap dd#u a:hover span div.first{ border-color:red; } dl#cartoonmap dd#g a:hover, dl#cartoonmap dd#g a:hover span, dl#cartoonmap dd#g a:hover span div.first{ border-color:gold; } dl#cartoonmap dd#p a:hover, dl#cartoonmap dd#p a:hover span, dl#cartoonmap dd#p a:hover span div.first{ border-color:green; } dl#cartoonmap dd#time a:hover, dl#cartoonmap dd#time a:hover span, dl#cartoonmap dd#time a:hover span div.first{ border-color:lightblue; }

dl#cartoonmap dd#ph a:hover span div.first {background:#ecf; color:#333;} dl#cartoonmap dd#at a:hover span div.first {background:#fc3; color:#333;} dl#cartoonmap dd#u a:hover span div.first {background:#fcc; color:#333;} dl#cartoonmap dd#g a:hover span div.first {background:#ffa; color:#333;} dl#cartoonmap dd#p a:hover span div.first {background:#cfc; color:#333;} dl#cartoonmap dd#time a:hover span div.first {background:lightblue; color:#333;}

/* subsequent hover positions (change when link positions change) (-left,h-imgH) */ dl#cartoonmap dd#ph a:hover{ background-position:-50px -253px; } dl#cartoonmap dd#at a:hover{ background-position:-185px -423px; } dl#cartoonmap dd#u a:hover{ background-position:-305px -423px; } dl#cartoonmap dd#g a:hover{ background-position:-405px -423px; } dl#cartoonmap dd#p a:hover{ background-position:-510px -423px; } dl#cartoonmap dd#time a:hover{ background-position:-620px -423px; }

/*	link hover spans place everything at (180,10) put=new-old puttop=new-(imageheight-(bottom+height)) dl#cartoonmap dd a:hover span{ display:block; position:absolute;

width:700px; height:239px;

border-width:1px; border-style:solid;

color:black; background-color:white; } dl#cartoonmap dd a:hover span div.first{ display:block; font-size:120%; font-weight:bold; padding:2px; text-align:center; border-bottom:1px dashed; } dl#cartoonmap dd a:hover span div.rest{ font-size:12pt; font-face:Arial; margin-left:1em; } dl#cartoonmap dd#ph a:hover span{ left:205px; top:-245px; } dl#cartoonmap dd#at a:hover span{ left:70px; top:-415px; } dl#cartoonmap dd#u a:hover span{ left:-50px; top:-415px; } dl#cartoonmap dd#g a:hover span{ left:-150px; top:-415px; } dl#cartoonmap dd#p a:hover span{ left:-255px; top:-415px; } dl#cartoonmap dd#time a:hover span{ left:-365px; top:-415px; }

/* Others that don't fit into a pattern */ dl#cartoonmap dd#banner span img{ position:absolute; /*left:283px;*/ right:10px; top:13px; width:700px; height:233px;

/* For preloading purposes only */ background:url('/wiki/images/7/7a/NYMU_main_pic_965px-bw.png') transparent no-repeat; background-position:-965px -965px; }

Banner  

pH Sensor  pH Sensor A sensor of proton concentration (pH). Activates in a high pH environment. 

Attachment  Attachment Attachment to the small intestine. 

Urea <a href="./Team:NYMU-Taipei/Project/Urea" onmouseover="haxbackground;" onmouseout="unhaxbackground;"> Clearance of Urea A Urea clearance device. </a></dd>

Guanidine</dt> <a href="./Team:NYMU-Taipei/Project/Guanidine" onmouseover="haxbackground;" onmouseout="unhaxbackground;"> Clearance of Guanidine The device managing the clearance of guanidino compounds. </a></dd>

Phosphate</dt> <a href="./Team:NYMU-Taipei/Project/Phosphate" onmouseover="haxbackground;" onmouseout="unhaxbackground;"> Clearance of Phosphate A Phosphate clearance and balance device. </a></dd>

Time Regulation</dt> <a href="./Team:NYMU-Taipei/Project/Time_Regulation" onmouseover="haxbackground;" onmouseout="unhaxbackground;"> Time Regulation Using oscillators to measure time, it enables detachment from the small intestine after a certain amount of time. </a></dd> </dl>