Line 9: | Line 9: | ||
<div class="contentbox"> | <div class="contentbox"> | ||
<h1 class="box-heading"> Meet the Guardians of our Galaxy! </h1> | <h1 class="box-heading"> Meet the Guardians of our Galaxy! </h1> | ||
− | < | + | <div style="background-image: url(https://static.igem.org/mediawiki/2017/0/04/Tu-dresden-teamphotoforaboutus.jpeg);padding-top: 0;"> |
+ | <div style="margin-bottom: 210px;"> | ||
+ | <svg viewBox="0 0 2200 1000" width="100%" onload="init(evt)"> | ||
+ | <script type="text/ecmascript"> | ||
+ | <![CDATA[ | ||
+ | |||
+ | function init(evt) | ||
+ | { | ||
+ | if ( window.svgDocument == null ) | ||
+ | { | ||
+ | svgDocument = evt.target.ownerDocument; | ||
+ | } | ||
+ | |||
+ | linkinfo = svgDocument.getElementById('linkinfo'); | ||
+ | linkinfo_bg = svgDocument.getElementById('linkinfo_bg'); | ||
+ | |||
+ | } | ||
+ | |||
+ | // Find your root SVG element | ||
+ | var svg = document.querySelector('svg'); | ||
+ | |||
+ | // Create an SVGPoint for future math | ||
+ | var pt = svg.createSVGPoint(); | ||
+ | |||
+ | // Get point in global SVG space | ||
+ | function cursorPoint(evt){ | ||
+ | pt.x = evt.clientX; pt.y = evt.clientY; | ||
+ | return pt.matrixTransform(svg.getScreenCTM().inverse()); | ||
+ | } | ||
+ | |||
+ | function ShowLinkinfo(evt, mouseovertext) | ||
+ | { | ||
+ | var loc = cursorPoint(evt); | ||
+ | |||
+ | linkinfo.setAttributeNS(null,"x",loc.x+5); | ||
+ | linkinfo.setAttributeNS(null,"y",loc.y+65); | ||
+ | linkinfo.firstChild.data = mouseovertext; | ||
+ | linkinfo.setAttributeNS(null,"visibility","visible"); | ||
+ | |||
+ | length = linkinfo.getComputedTextLength(); | ||
+ | linkinfo_bg.setAttributeNS(null,"width",length+6); | ||
+ | linkinfo_bg.setAttributeNS(null,"x",loc.x+2); | ||
+ | linkinfo_bg.setAttributeNS(null,"y",loc.y+8); | ||
+ | linkinfo_bg.setAttributeNS(null,"visibility","visibile"); | ||
+ | } | ||
+ | |||
+ | function HideLinkinfo(evt) | ||
+ | { | ||
+ | linkinfo.setAttributeNS(null,"visibility","hidden"); | ||
+ | linkinfo_bg.setAttributeNS(null,"visibility","hidden"); | ||
+ | } | ||
+ | |||
+ | ]]> | ||
+ | </script> | ||
+ | <defs> | ||
+ | <style> | ||
+ | circle { | ||
+ | opacity:0; | ||
+ | } | ||
+ | circle:hover { | ||
+ | opacity:0; | ||
+ | } | ||
+ | |||
+ | .linkinfo{ | ||
+ | text-shadow: 0 0 3px var(--logo-dark-blue); | ||
+ | font-family: Orbitron, sans-serif; | ||
+ | font-size: 50px; | ||
+ | } | ||
+ | .linkinfo_bg{ | ||
+ | fill: white; | ||
+ | opacity: 0.85; | ||
+ | } | ||
+ | </style> | ||
+ | </defs> | ||
+ | |||
+ | |||
+ | <a xlink:href="https://2017.igem.org/Team:TU_Dresden/Description"> | ||
+ | <circle cx="976" cy="720" r="185" | ||
+ | onmousemove="ShowLinkinfo(evt, 'Project')" | ||
+ | onmouseout="HideLinkinfo(evt)"/> | ||
+ | |||
+ | |||
+ | <rect class="linkinfo_bg" id="linkinfo_bg" | ||
+ | x="0" y="0" rx="4" ry="4" | ||
+ | width="55" height="80" visibility="hidden"/> | ||
+ | <text class="linkinfo" id="linkinfo" | ||
+ | x="0" y="0" visibility="hidden">Tooltip</text> | ||
+ | </svg> | ||
+ | </div> | ||
<img src="https://static.igem.org/mediawiki/2017/0/04/Tu-dresden-teamphotoforaboutus.jpeg" | <img src="https://static.igem.org/mediawiki/2017/0/04/Tu-dresden-teamphotoforaboutus.jpeg" | ||
alt="An example picture to show how to include them." | alt="An example picture to show how to include them." |
Revision as of 22:21, 1 November 2017