Team:Manchester/Safetytest
From 2013.igem.org
Abramov denn (Talk | contribs) |
Abramov denn (Talk | contribs) |
||
Line 4: | Line 4: | ||
<head> | <head> | ||
<title> Safety </title> | <title> Safety </title> | ||
+ | <script type='text/javascript' src="http://code.jquery.com/jquery-1.8.0.min.js"></script> | ||
+ | <script type='text/javascript' src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> | ||
+ | <script> | ||
+ | function openMenu(id) | ||
+ | { | ||
+ | var text = document.getElementById(id); | ||
+ | |||
+ | if(text.style.display == "" || text.style.display == "none") | ||
+ | { | ||
+ | text.style.display = "block"; | ||
+ | } | ||
+ | else | ||
+ | { | ||
+ | text.style.display = "none"; | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | <script type='text/javascript'> | ||
+ | function hoverLink1() | ||
+ | { | ||
+ | $("#block #link1").hover(function() { | ||
+ | $("#block #image1").toggleClass("expand"); | ||
+ | }); | ||
+ | $("#block #link1").mouseenter(function() { | ||
+ | $("#block #image1").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #link1").mouseleave(function() { | ||
+ | $("#block #image1").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverImage1() | ||
+ | { | ||
+ | $("#block #image1").mouseenter(function() { | ||
+ | $("#block #image1").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #image1").mouseleave(function() { | ||
+ | $("#block #image1").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverLink2() | ||
+ | { | ||
+ | $("#block #link2").hover(function() { | ||
+ | $("#block #image2").toggleClass("expand"); | ||
+ | }); | ||
+ | $("#block #link2").mouseenter(function() { | ||
+ | $("#block #image2").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #link2").mouseleave(function() { | ||
+ | $("#block #image2").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverImage2() | ||
+ | { | ||
+ | $("#block #image2").mouseenter(function() { | ||
+ | $("#block #image2").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #image2").mouseleave(function() { | ||
+ | $("#block #image2").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverLink3() | ||
+ | { | ||
+ | $("#block #link3").hover(function() { | ||
+ | $("#block #image3").toggleClass("expand"); | ||
+ | }); | ||
+ | $("#block #link3").mouseenter(function() { | ||
+ | $("#block #image3").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #link3").mouseleave(function() { | ||
+ | $("#block #image3").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverImage3() | ||
+ | { | ||
+ | $("#block #image3").mouseenter(function() { | ||
+ | $("#block #image3").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #image3").mouseleave(function() { | ||
+ | $("#block #image3").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverLink4() | ||
+ | { | ||
+ | $("#block #link4").hover(function() { | ||
+ | $("#block #image4").toggleClass("expand"); | ||
+ | }); | ||
+ | $("#block #link4").mouseenter(function() { | ||
+ | $("#block #image4").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #link4").mouseleave(function() { | ||
+ | $("#block #image4").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverImage4() | ||
+ | { | ||
+ | $("#block #image4").mouseenter(function() { | ||
+ | $("#block #image4").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #image4").mouseleave(function() { | ||
+ | $("#block #image4").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverLink5() | ||
+ | { | ||
+ | $("#block #link5").hover(function() { | ||
+ | $("#block #image5").toggleClass("expand"); | ||
+ | }); | ||
+ | $("#block #link5").mouseenter(function() { | ||
+ | $("#block #image5").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #link5").mouseleave(function() { | ||
+ | $("#block #image5").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | function hoverImage5() | ||
+ | { | ||
+ | $("#block #image5").mouseenter(function() { | ||
+ | $("#block #image5").css({marginLeft: "20px"}); | ||
+ | }); | ||
+ | $("#block #image5").mouseleave(function() { | ||
+ | $("#block #image5").css({marginLeft: "25px"}); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
<style type="text/css"> | <style type="text/css"> | ||
Line 125: | Line 261: | ||
</head> | </head> | ||
- | <body> | + | <body onLoad="hoverLink1(); hoverLink2(); hoverLink3(); hoverImage1(); hoverImage2(); hoverImage3(); |
- | + | hoverLink4(); hoverImage4(); hoverLink5(); hoverImage5();"> | |
- | + | /******************************************************************************************************************/ | |
<div class="header"> | <div class="header"> | ||
<div class="banner"> | <div class="banner"> | ||
Line 151: | Line 287: | ||
</div> | </div> | ||
+ | /***************************************************************************************************************/ | ||
+ | <div class="container" style="margin-top:50px;"> | ||
+ | <div id="block"> | ||
+ | <img src="navigation icons/home.gif" width="50" height="50" id="image1"/> | ||
+ | <a href="#" id="link1">Home</a> | ||
+ | </div> | ||
+ | |||
+ | <div id="block"> | ||
+ | <img src="navigation icons/group.gif" width="50" height="50" id="image2"/> | ||
+ | <a href="#" onclick="javascript:openMenu('sub')" id="link2">About</a> | ||
+ | <ul class="submenu" id="sub"> | ||
+ | <li><a href="#" id="link2">Our Team</a></li> | ||
+ | <li><a href="#" id="link2">Team Profile</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div id="block"> | ||
+ | <img src="navigation icons/project.gif" width="50" height="50" id="image3"/> | ||
+ | <a href="#" onclick="javascript:openMenu('sub2')" id="link3">Project</a> | ||
+ | <ul class="submenu" id="sub2"> | ||
+ | <li><a href="#" id="link3">Aim</a></li> | ||
+ | <li><a href="#" id="link3">Modelling</a></li> | ||
+ | <li><a href="#" id="link3">Notebook</a></li> | ||
+ | <li><a href="#" id="link3">Contributions</a></li> | ||
+ | <li><a href="#" id="link3">Safety</a></li> | ||
+ | <li><a href="#" id="link3">Human Proctices</a></li> | ||
+ | <li><a href="#" id="link3">Attributions</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div id="block"> | ||
+ | <img src="navigation icons/outreach.gif" width="50" height="50" id="image4"/> | ||
+ | <a href="#" onclick="javascript:openMenu('sub3')" id="link4">Outreach</a> | ||
+ | <ul class="submenu" id="sub3"> | ||
+ | <li><a href="#" id="link4">Event 1</a></li> | ||
+ | <li><a href="#" id="link4">Event 2</a></li> | ||
+ | <li><a href="#" id="link4">Event 3</a></li> | ||
+ | <li><a href="#" id="link4">Event 4</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div id="block"> | ||
+ | <img src="navigation icons/sponsors.gif" width="50" height="50" id="image5"/> | ||
+ | <a href="#" id="link5">Sponsors</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | /*******************************************************************************************************************/ | ||
<div class="wrapper" > | <div class="wrapper" > | ||
<div class="text1"> | <div class="text1"> |
Revision as of 15:21, 21 July 2013
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor?
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor?
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor?
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor?
Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, ed do eiusmod tempor incididunt ut labore et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit