|
|
Line 8: |
Line 8: |
| } | | } |
| </style> | | </style> |
- |
| |
- |
| |
- | <!--link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:USTC_CHINA/main.css?action=raw&ctype=text/css" />
| |
- | <link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:USTC_CHINA/humanpractice.css?action=raw&ctype=text/css" />
| |
- |
| |
- |
| |
- |
| |
- | <style>
| |
- | #wrapper {
| |
- | position: relative;
| |
- | margin: 0px 0px 20px -146px;
| |
- | border: 1px solid #fafafa;
| |
- | -moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
| |
- | -webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
| |
- | box-shadow: 0 3px 3px rgba(0,0,0,.5);
| |
- | margin-top:400px !important;
| |
- | }
| |
- | </style>
| |
- |
| |
- |
| |
- | <script src="http://code.jquery.com/jquery-1.6.3.min.js" type= "text/javascript"> </script>
| |
- | <script>
| |
- | $(document).ready(function(){
| |
- |
| |
- | // set the wrapper width and height to match the img size
| |
- | $('#wrapper').css({'width':$('#wrapper img').width(),
| |
- | 'height':$('#wrapper img').height()
| |
- | })
| |
- |
| |
- | //tooltip direction
| |
- | var tooltipDirection;
| |
- |
| |
- | for (i=0; i<$(".pin").length; i++)
| |
- | {
| |
- | // set tooltip direction type - up or down
| |
- | if ($(".pin").eq(i).hasClass('pin-down')) {
| |
- | tooltipDirection = 'tooltip-down';
| |
- | } else {
| |
- | tooltipDirection = 'tooltip-up';
| |
- | }
| |
- |
| |
- | // append the tooltip
| |
- | $("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
| |
- | <div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
| |
- | </div>");
| |
- | }
| |
- |
| |
- | // show/hide the tooltip
| |
- | $('.tooltip-up, .tooltip-down').mouseenter(function(){
| |
- | $(this).children('.tooltip').fadeIn(100);
| |
- | }).mouseleave(function(){
| |
- | $(this).children('.tooltip').fadeOut(100);
| |
- | })
| |
- | });
| |
- | </script-->
| |
- |
| |
- |
| |
- |
| |
- |
| |
| | | |
| </head> | | </head> |