|
|
| Line 1: |
Line 1: |
| − | {{Hong_Kong_HKUST/Navbar}}
| |
| | | | |
| − | <html>
| |
| − | <body>
| |
| − | <div id="openModal" class="talk-bubble tri-right border round btm-left-in">
| |
| − | <div class="talktext">
| |
| − | <p>Name: <span id="box"> </span></p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div align="center" class="image">
| |
| − | <!--<p>CoorX:<span id="x"></span> CoorY:<span id="y"></span></p>-->
| |
| − | <img src="https://static.igem.org/mediawiki/2017/c/cf/HKUST_TEAM_member.jpeg" alt="Team"style" width="1080" height="1920"
| |
| − | usemap="teammap">
| |
| − | <map name="teammap">
| |
| − | <area shape="rect" onmouseenter="PopUp('William')" onmouseout="Hide('William')" coords="50,132,241,428"
| |
| − | alt="william">
| |
| − | <area shape="rect" onmouseover="PopUp('Devi')" onmouseout="Hide('Devi')"coords="302,133,524,428" alt="Devi">
| |
| − | <area shape="rect" onmouseover="PopUp('Alvin')" onmouseout="Hide('Alvin')" coords="569,136,777,424" alt="Alvin">
| |
| − | <area shape="rect" onmouseover="PopUp('Harold')" onmouseout="Hide('Harold')" coords="835,138,1037,425" alt="Harold">
| |
| − | <area shape="rect" onmouseover="PopUp('Handi')" onmouseout="Hide('Handi')" coords="18,436,276,744" alt="Harold">
| |
| − | </map>
| |
| − |
| |
| − | </div>
| |
| − | <style>
| |
| − | .image {
| |
| − | position: relative;
| |
| − | /*width: 100%; for IE 6 */
| |
| − | }
| |
| − | #openModal {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | z-index: 3
| |
| − | }
| |
| − | .talk-bubble {
| |
| − | //margin: 40px;
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | width: 200px;
| |
| − | height: auto;
| |
| − | background-color: lightyellow;
| |
| − | }
| |
| − | .border{
| |
| − | border: 8px solid #666;
| |
| − | }
| |
| − | .round{
| |
| − | border-radius: 30px;
| |
| − | -webkit-border-radius: 30px;
| |
| − | -moz-border-radius: 30px;
| |
| − | }
| |
| − | .tri-right.border.btm-left-in:before {
| |
| − | content: ' ';
| |
| − | position: absolute;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | left: 30px;
| |
| − | right: auto;
| |
| − | top: auto;
| |
| − | bottom: -40px;
| |
| − | border: 20px solid;
| |
| − | border-color: #666 transparent transparent #666;
| |
| − | }
| |
| − | .tri-right.btm-left-in:after{
| |
| − | content: ' ';
| |
| − | position: absolute;
| |
| − | width: 0;
| |
| − | height: 0;
| |
| − | left: 38px;
| |
| − | right: auto;
| |
| − | top: auto;
| |
| − | bottom: -20px;
| |
| − | border: 12px solid;
| |
| − | border-color: lightyellow transparent transparent lightyellow;
| |
| − | }
| |
| − | .talktext{
| |
| − | padding: 1em;
| |
| − | text-align: left;
| |
| − | line-height: 1.5em;
| |
| − | }
| |
| − | .talktext p{
| |
| − | /* remove webkit p margins */
| |
| − | -webkit-margin-before: 0em;
| |
| − | -webkit-margin-after: 0em;
| |
| − | }
| |
| − | </style>
| |
| − | <script>
| |
| − | var coorX = 0;
| |
| − | var coorY = 0;
| |
| − | function readMouseMove(e){
| |
| − | coorX = e.clientX-38;
| |
| − | coorY = e.clientY-114;
| |
| − | /*
| |
| − | var result_x = document.getElementById('x');
| |
| − | var result_y = document.getElementById('y');
| |
| − | result_x.innerHTML = coorX;
| |
| − | result_y.innerHTML = coorY;
| |
| − | */
| |
| − | var modal = document.getElementById('openModal');
| |
| − | modal.style.left = coorX+'px';
| |
| − | modal.style.top = coorY+'px';
| |
| − | }
| |
| − | document.onmousemove = readMouseMove;
| |
| − | function PopUp(name) {
| |
| − | //alert("popup");
| |
| − | var x = document.getElementById('openModal');
| |
| − | x.style.display='block';
| |
| − | document.getElementById('box').innerHTML = name;
| |
| − | }
| |
| − | function Hide(name) {
| |
| − | var x = document.getElementById('openModal');
| |
| − | x.style.display='none';
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | <p>our advisors</p>
| |
| − | </body>
| |
| − | </html>
| |
| − |
| |
| − | {{Hong_Kong_HKUST/Footer}}
| |
