Difference between revisions of "Msc1G2:Student1"

From ex25
Jump to: navigation, search
Line 1: Line 1:
 
<html>
 
<html>
  
<head>
+
<iframe src="http://raumgewand.de/Swarmscape.html" width="850" height="450" frameBorder="0"  
<style type="text/css">
+
</iframe>
 
+
.hotspot {
+
    position: absolute;
+
    border: 1px solid blue;
+
}
+
.hotspot + * {
+
    pointer-events: none;
+
    opacity: 0;
+
}
+
.hotspot:hover + * {
+
    opacity: 1.0;
+
}
+
.wash {
+
    position: absolute;
+
    top: 0;
+
    left: 0;
+
    bottom: 0;
+
    right: 0;
+
    background-color: rgba(255, 255, 255, 0.6);
+
}
+
 
+
 
+
 
+
+
</style>
+
</head>
+
 
+
 
+
<div style="position: relative; height: 188px; width: 300px;">
+
    <img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg">
+
       
+
    <div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div>
+
    <div>
+
        <div class="wash"></div>
+
        <div style="position: absolute; top: 0; left: 0;">A</div>
+
    </div>
+
       
+
    <div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div>
+
    <div>
+
        <div class="wash"></div>
+
        <div style="position: absolute; top: 0; left: 0;">B</div>
+
    </div>
+
</div>
+
 
</html>
 
</html>

Revision as of 03:17, 26 January 2016