CSS Only:
Thinking about it on my way to the supermarket, you could of course also skip the entire image map idea, and make use of :hover
on the elements on top of the image (changed the divs to a-blocks). Which makes things hell of a lot simpler, no jQuery needed…
Short explanation:
- Image is in the bottom
- 2 x a with display:block and absolute positioning + opacity:0
- Set opacity to 0.2 on hover
Example:
.area {
background:#fff;
display:block;
height:475px;
opacity:0;
position:absolute;
width:320px;
}
#area2 {
left:320px;
}
#area1:hover, #area2:hover {
opacity:0.2;
}
<a id="area1" class="area" href="#"></a>
<a id="area2" class="area" href="#"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
Original Answer using jQuery
I just created something similar with jQuery, I don’t think it can be done with CSS only.
Short explanation:
- Image is in the bottom
- Divs with rollover (image or color) with absolute positioning + display:none
- Transparent gif with the actual
#map
is on top (absolute position) (to prevent call tomouseout
when the rollovers appear) - jQuery is used to show/hide the divs
$(document).ready(function() {
if ($('#location-map')) {
$('#location-map area').each(function() {
var id = $(this).attr('id');
$(this).mouseover(function() {
$('#overlay' + id).show();
});
$(this).mouseout(function() {
var id = $(this).attr('id');
$('#overlay' + id).hide();
});
});
}
});
body,
html {
margin: 0;
}
#emptygif {
position: absolute;
z-index: 200;
}
#overlayr1 {
position: absolute;
background: #fff;
opacity: 0.2;
width: 300px;
height: 160px;
z-index: 100;
display: none;
}
#overlayr2 {
position: absolute;
background: #fff;
opacity: 0.2;
width: 300px;
height: 160px;
top: 160px;
z-index: 100;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" />
<div id="overlayr1"> </div>
<div id="overlayr2"> </div>
<img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" />
<map name="location-map" id="location-map">
<area shape="rect" coords="0,0,300,160" href="#" id="r1" />
<area shape="rect" coords="0,161,300,350" href="#" id="r2"/>
</map>
Hope it helps..