Difference between revisions of "Msc1G2:Student1"

From ex25
Jump to: navigation, search
Line 1: Line 1:
−
<html><img  src="http://ex25.hyperbody.nl/images/thumb/5/5e/Header.jpg/800px-Header.jpg" border="0" width="1134" height="600" orgWidth="1134" orgHeight="600" usemap="#image-maps-2016-01-25-202850" alt="" />
+
<html>
−
<map name="image-maps-2016-01-25-202850" id="ImageMapsCom-image-maps-2016-01-25-202850">
+
 
−
<area shape="rect" coords="1132,598,1134,600" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
+
<head>  
−
<area  alt="" title="" href="http://www.image-maps.com/" shape="poly" coords="70,138,332,137,201,361,1,361,0,263" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://ex25.hyperbody.nl/images/thumb/c/c3/Concept.jpg/800px-Concept.jpg';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://www.image-maps.com/m/private/0/3g4j90tj0dq53v5v8cl9vd4p16_header.jpg';" />
+
<style type="text/css">  
−
<area  alt="" title="" href="http://www.image-maps.com/" shape="poly" coords="335,140,207,365,336,587,464,363" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://ex25.hyperbody.nl/images/thumb/2/20/Modules.jpg/800px-Modules.jpg';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://www.image-maps.com/m/private/0/3g4j90tj0dq53v5v8cl9vd4p16_header.jpg';" />
+
 
−
<area  alt="" title="" href="http://www.image-maps.com/" shape="poly" coords="341,138,598,139,726,362,469,362" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://ex25.hyperbody.nl/images/thumb/f/f2/Interaction.jpg/800px-Interaction.jpg';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://www.image-maps.com/m/private/0/3g4j90tj0dq53v5v8cl9vd4p16_header.jpg';" />
+
.hotspot {
−
<area  alt="" title="" href="http://www.image-maps.com/" shape="poly" coords="604,138,859,138,990,362,732,360" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://ex25.hyperbody.nl/images/thumb/f/f5/Construction.jpg/800px-Construction.jpg';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://www.image-maps.com/m/private/0/3g4j90tj0dq53v5v8cl9vd4p16_header.jpg';" />
+
    position: absolute;
−
<area  alt="" title="" href="http://www.image-maps.com/" shape="poly" coords="865,135,996,360,1123,137,1046,1,941,0" style="outline:none;" target="_self"  onmouseover="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://ex25.hyperbody.nl/images/thumb/f/f2/Prototype.jpg/800px-Prototype.jpg';" onmouseout="if(document.images) document.getElementById('Image-Maps-Com-image-maps-2016-01-25-202850').src= 'http://www.image-maps.com/m/private/0/3g4j90tj0dq53v5v8cl9vd4p16_header.jpg';" />
+
    border: 1px solid blue;
−
</map>
+
}
 +
.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:42, 26 January 2016

A
B

Retrieved from "http://ex25.hyperbody.nl/index.php?title=Msc1G2:Student1&oldid=7431"