|
|
| 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