hi, i am using media queries to style a website for a few different devices. I am creating new background images to suit the screen size. Is it possible to add hotspots to media queries? I have tried to use image maps but cant seem to get the hotspots working? is this the correct way to do this?

The css is
@media only screen and (min-width: 533px)and (max-width: 533px){
.container{ background-image:url("http://www.rootdesignbelfast.co.uk/wp-content/uploads/2014/01/Kindle-533-x-8531.png") alt="" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="78,181,152,209" href="http://www.rootdesignbelfast.co.uk">
<area shape="rect" coords="178,180,255,208" href="http://www.rootdesignbelfast.co.uk/about/">
<area shape="rect" coords="276,182,358,205" href="http://www.rootdesignbelfast.co.uk/work/ngo/">
<area shape="rect" coords="379,183,458,210" href="http://www.rootdesignbelfast.co.uk/contact/">
</map>) ;}

can anyone help?