Difference between revisions of "Team:LUBBOCK TTU"

@@ Line 54: / Line 54: @@
 @keyframes blink{
    to{opacity: .0;}
+}
+<!-- map -->
+#map {
+    position: relative;
+}
+#overlay {
+    position: absolute;
+    background: #000;
+    color: #fff;
+    top: 20px;
+    left: 20px;
 }
 </style>
@@ Line 63: / Line 75: @@
 <!-- Map -->
 <center>
-<img id = "home-button" alt = "" src = "https://static.igem.org/mediawiki/2017/8/82/Lubbock_TTU_largemap.png" height= width=  alt="" usemap="#Map"/ width="95%">
+<!--<img id = "home-button" alt = "" src = "https://static.igem.org/mediawiki/2017/8/82/Lubbock_TTU_largemap.png" height= width=  alt="" usemap="#Map"/ width="95%">-->
+<body>
+<div id="map">
+    <div id="overlay"></div>
+    <img src="https://static.igem.org/mediawiki/2017/8/82/Lubbock_TTU_largemap.png" width="95%" height="" alt="" usemap="#map" />
+</div>
+<map name="map">
+<area shape="circle" coords="90,58,30" alt="" href="" />
+<area shape="circle" coords="124,58,8" alt="" href="" />
+<area shape="circle" coords="124,58,8" alt="" href="" />
+<area shape="circle" coords="124,58,8" alt="" href="" />
+<area shape="circle" coords="124,58,8" alt="" href="" />
+<area shape="circle" coords="124,58,8" alt="" href="" />
+</map>
+</body>
 <br></br></br>
 <font size="10" color="CC0000">C:\LUBBOCK_TTU<span>|</span></font>
@@ Line 74: / Line 99: @@
 </body>
+<!-- map -->
 <script>
-    $(document).ready(function() {
+$('area').each(function(){
-        if($('#location-map')) {
+    var area = $(this),
-            $('#location-map area').each(function() {
+        alt = area.attr('alt');
-                var id = $(this).attr('id');
+    area.mouseenter(function(){
-                $(this).mouseover(function() {
+        $('#overlay').html(alt);
-                    $('#overlay'+id).show();
+    }).mouseleave(function(){
+        $('#overlay').html('');
-                });
-                $(this).mouseout(function() {
-                    var id = $(this).attr('id');
-                    $('#overlay'+id).hide();
-                });
-            });
-        }
      });
+});
 </script>