I have an image on a web page that also requires links. I am using an image map to create the links and I am wondering if there is a way to style the area shape on mouseover for a minor touch of interactivity. Is this possible?
I tried this without success:
html
<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
<area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
<area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
<area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>
css
area { border: 1px solid #d5d5d5; }
Any suggestions?
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:
.area {_x000D_
background:#fff;_x000D_
display:block;_x000D_
height:475px;_x000D_
opacity:0;_x000D_
position:absolute;_x000D_
width:320px;_x000D_
}_x000D_
#area2 {_x000D_
left:320px;_x000D_
}_x000D_
#area1:hover, #area2:hover {_x000D_
opacity:0.2;_x000D_
}<a id="area1" class="area" href="#"></a>_x000D_
<a id="area2" class="area" href="#"></a>_x000D_
<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" />I just created something similar with jQuery, I don't think it can be done with CSS only.
Short explanation:
#map is on top (absolute position) (to prevent call to mouseout when the rollovers appear) $(document).ready(function() {_x000D_
if($('#location-map')) {_x000D_
$('#location-map area').each(function() {_x000D_
var id = $(this).attr('id');_x000D_
$(this).mouseover(function() {_x000D_
$('#overlay'+id).show();_x000D_
_x000D_
});_x000D_
_x000D_
$(this).mouseout(function() {_x000D_
var id = $(this).attr('id');_x000D_
$('#overlay'+id).hide();_x000D_
});_x000D_
_x000D_
});_x000D_
}_x000D_
});body,html {_x000D_
margin:0;_x000D_
}_x000D_
#emptygif {_x000D_
position:absolute;_x000D_
z-index:200;_x000D_
}_x000D_
#overlayr1 {_x000D_
position:absolute;_x000D_
background:#fff;_x000D_
opacity:0.2;_x000D_
width:300px;_x000D_
height:160px;_x000D_
z-index:100;_x000D_
display:none;_x000D_
}_x000D_
#overlayr2 {_x000D_
position:absolute;_x000D_
background:#fff;_x000D_
opacity:0.2;_x000D_
width:300px;_x000D_
height:160px;_x000D_
top:160px;_x000D_
z-index:100;_x000D_
display:none;_x000D_
}<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" />_x000D_
<div id="overlayr1"> </div>_x000D_
<div id="overlayr2"> </div>_x000D_
<img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" />_x000D_
<map name="location-map" id="location-map">_x000D_
<area shape="rect" coords="0,0,300,160" href="#" id="r1" />_x000D_
<area shape="rect" coords="0,161,300,350" href="#" id="r2"/>_x000D_
</map>Hope it helps..
You can do this by just changing the html. Here's an example:
<hmtl>
<head>
<title>Some title</title>
</head>
<body>
<map name="navigatemap">
<area shape="rect"
coords="166,4,319,41"
href="WII.htm"
onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'"
onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverWII).png'"
/>
<area shape="rect"
coords="330,4,483,41"
href="OT.htm"
onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'"
onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOT).png'"
/>
<area shape="rect"
coords="491,3,645,41"
href="OP.htm"
onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'"
onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOP).png'"
/>
</map>
<img src="Assets/NavigationBar(OnHome).png"
name="navbar"
usemap="#navigatemap" />
</body>
</html>
I don't think this is possible just using CSS (not cross browser at least) but the jQuery plugin ImageMapster will do what you're after. You can outline, colour in or use an alternative image for hover/active states on an image map.
Sorry to jump on this question late in the game but I have an answer for irregular (non-rectangular) shapes. I solved it using SVGs to generate masks of where I want to have the event attached.
The idea is to attach events to inlined SVGs, super cheap and even user friendly because there are plenty of programs for generating SVGs. The SVG can have a layer of the image as a background.
http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/
With pseudo elements.
HTML:
<div class="image-map-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />
<div class="map-selector"></div>
</div>
<map name="image-map" id="image-map">
<area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />
<area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />
<area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />
<area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />
<area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />
<area alt="" title="" href="#" shape="rect" coords="93,9,199,122" />
</map>
some CSS:
.image-map-container {
position: relative;
display:inline-block;
}
.image-map-container img {
display:block;
}
.image-map-container .map-selector {
left:0;top:0;right:0;bottom:0;
color:#546E7A00;
transition-duration: .3s;
transition-timing-function: ease-out;
transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
color:#546E7A80;
}
.map-selector:after {
content: '';
position: absolute;
top: inherit;right: inherit;bottom: inherit;left: inherit;
background: currentColor;
transition-duration: .3s;
transition-timing-function: ease-out;
transition-property: top, left, right, bottom, background;
pointer-events: none;
}
JS:
$('#image-map area').hover(
function () {
var coords = $(this).attr('coords').split(','),
width = $('.image-map-container').width(),
height = $('.image-map-container').height();
$('.image-map-container .map-selector').addClass('hover').css({
'left': coords[0]+'px',
'top': coords[1] + 'px',
'right': width - coords[2],
'bottom': height - coords[3]
})
},
function () {
$('.image-map-container .map-selector').removeClass('hover').attr('style','');
}
)
Here's one that is pure css that uses the + next sibling selector, :hover, and pointer-events. It doesn't use an imagemap, technically, but the rect concept totally carries over:
.hotspot {_x000D_
position: absolute;_x000D_
border: 1px solid blue;_x000D_
}_x000D_
.hotspot + * {_x000D_
pointer-events: none;_x000D_
opacity: 0;_x000D_
}_x000D_
.hotspot:hover + * {_x000D_
opacity: 1.0;_x000D_
}_x000D_
.wash {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 0;_x000D_
bottom: 0;_x000D_
right: 0;_x000D_
background-color: rgba(255, 255, 255, 0.6);_x000D_
}<div style="position: relative; height: 188px; width: 300px;">_x000D_
<img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg">_x000D_
_x000D_
<div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div>_x000D_
<div>_x000D_
<div class="wash"></div>_x000D_
<div style="position: absolute; top: 0; left: 0;">A</div>_x000D_
</div>_x000D_
_x000D_
<div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div>_x000D_
<div>_x000D_
<div class="wash"></div>_x000D_
<div style="position: absolute; top: 0; left: 0;">B</div>_x000D_
</div>_x000D_
</div>You could use Canvas
in HTML, simply add a canva
<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>
And in Javascript (only an example, that will draw a rectangle on the picture)
var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image();
img.src = '{main_photo}';
img.onload = function() { // after the pic is loaded
ctx.drawImage(this,0,0); // add the picture
ctx.beginPath(); // start the rectangle
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.strokeStyle = "sienna"; // set color
ctx.stroke(); // apply color
ctx.lineWidth = 5;
// ctx.closePath();
};
Source: Stackoverflow.com