Team:Gaston Day School
From 2009.igem.org
(Difference between revisions)
Sheranhussin (Talk | contribs) |
Sheranhussin (Talk | contribs) |
||
Line 1: | Line 1: | ||
- | <!-- | + | <!-- [[Image:picture]]--> |
+ | |||
+ | <!--[[Image:picture|border|center|Bac2Kidney]]--> | ||
<html> | <html> | ||
- | < | + | <script> |
- | + | function haxbackground(){ | |
- | + | document.getElementById('cartoonmap').style.backgroundImage='url(picture)'; | |
- | + | } | |
- | + | function unhaxbackground(){ | |
- | + | document.getElementById('cartoonmap').style.backgroundImage="url('picture')"; | |
- | </div> | + | } |
- | <div id=" | + | </script> |
- | + | <style> | |
- | </div> | + | dl#cartoonmap{ |
- | </ | + | background:url('picture') 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('picture') 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('picture') transparent no-repeat; | ||
+ | background-position:-965px -965px; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <dl id="cartoonmap"> | ||
+ | <dt>Banner</dt> | ||
+ | <dd id="banner"> | ||
+ | <span><img src="picture" width="700" alt="BacToKidney - Toward a better quality of life"></span> | ||
+ | </dd> | ||
+ | |||
+ | <dt>one</dt> | ||
+ | <dd id="ph"><a href="one" onmouseover="haxbackground();" onmouseout="unhaxbackground();"> | ||
+ | <span><div class="first">pH Sensor</div> | ||
+ | <div class="rest">A sensor of proton concentration (pH). Activates in a high pH environment.</div></span> | ||
+ | </a></dd> | ||
+ | |||
+ | <dt>two</dt> | ||
+ | <dd id="at"><a href=".two" onmouseover="haxbackground();" onmouseout="unhaxbackground();"> | ||
+ | <span><div class="first">Attachment</div> | ||
+ | <div class="rest">Attachment to the small intestine.</div></span> | ||
+ | </a></dd> | ||
+ | |||
+ | <dt>3</dt> | ||
+ | <dd id="u"><a href="3" onmouseover="haxbackground();" onmouseout="unhaxbackground();"> | ||
+ | <span><div class="first">Clearance of Urea</div> | ||
+ | <div class="rest">A Urea clearance device.</div></span> | ||
+ | </a></dd> | ||
+ | |||
+ | <dt>4</dt> | ||
+ | <dd id="g"><a href="4" onmouseover="haxbackground();" onmouseout="unhaxbackground();"> | ||
+ | <span><div class="first">Clearance of Guanidine</div> | ||
+ | <div class="rest">The device managing the clearance of guanidino compounds.</div></span> | ||
+ | </a></dd> | ||
+ | |||
+ | <dt>5</dt> | ||
+ | <dd id="p"><a href="5" onmouseover="haxbackground();" onmouseout="unhaxbackground();"> | ||
+ | <span><div class="first">Clearance of Phosphate</div> | ||
+ | <div class="rest">A Phosphate clearance and balance device.</div></span> | ||
+ | </a></dd> | ||
+ | |||
+ | <dt>6</dt> | ||
+ | <dd id="time"><a href="6" onmouseover="haxbackground();" onmouseout="unhaxbackground();"> | ||
+ | <span><div class="first">Time Regulation</div> | ||
+ | <div class="rest">Using oscillators to measure time, it enables detachment from the small intestine after a certain amount of time.</div></span> | ||
+ | </a></dd> | ||
+ | </dl> | ||
</html> | </html> | ||
+ | {{:Team:NYMU-Taipei/Links}} | ||
- | |||
- | {| | + | {| style="width:965px;border:1px solid gray;" |
- | + | ||
- | + | ||
|- | |- | ||
- | | | + | | style="vertical-align:top;width:50%;border-right:1px solid gray;" | <font size="4"><b>'''BacToKidney'''</b></font> - ''blahhh''. |
- | '' | + | <br>'''blahhh:''' |
- | + | blahhh | |
- | + | <br>'''blahhh''' | |
- | + | * blahhh | |
- | + | * blahhh | |
- | + | * blahhh | |
- | + | <br>'''blahhh:''' | |
- | < | + | * blahhh |
+ | <br>'''blahhh:''' | ||
+ | * blahhh | ||
+ | ** blahhh | ||
+ | * blahhh | ||
+ | ** blahhh | ||
+ | * blahhh | ||
+ | ** blahhh | ||
+ | * blahhh | ||
+ | ** blahhh | ||
+ | * blahhh | ||
+ | ** blahhh | ||
+ | * blahhh | ||
+ | ** blahhh | ||
+ | ** blahhh | ||
+ | *** blahhh | ||
+ | *** blahhh | ||
- | + | | style="vertical-align:top;" | {{:more}} <!-- Edit the News page for news please. --> | |
- | + | ||
- | ! | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
|} | |} | ||
- | + | {{:Team:gds/Footer}} |
Revision as of 04:20, 5 June 2009
- Banner
- one
-
pH SensorA sensor of proton concentration (pH). Activates in a high pH environment.
- two
-
AttachmentAttachment to the small intestine.
- 3
-
Clearance of UreaA Urea clearance device.
- 4
-
Clearance of GuanidineThe device managing the clearance of guanidino compounds.
- 5
-
Clearance of PhosphateA Phosphate clearance and balance device.
- 6
-
Time RegulationUsing oscillators to measure time, it enables detachment from the small intestine after a certain amount of time.
Home | Project Overview: | Chassis | Receptors | Removal | Experiments and Parts | F.A.Q | About Us |
BacToKidney - blahhh.
| More |