Imagemap on hover display image

Question

I've created an imagemap for a site I'm working on, a bit old school I know but I was explicitly requested to achieve something that requires this type of thing.

Essentially I'm looking to have an image appear as a hover item when you mouseover certain co-ordinates that have been designated. Most documentation/questions I have read are concerned with an outline hover, i.e. the mapped area will be highlighted. I'm using a Jquery plugin which allows resizing of the image whilst retaining the correct co-ordinates, so I'm not using any of the others which generally allow for outline highlight on hover.

I know you're able to change certain item's attributes in basic html/css with a:hover etc, however I don't think this is a similar situation due to the nature of the imagemap. Is it possible to simply have an image be displayed when mousing over/clicking on a designated area on the image map?

I also looked in to using Photoswipe (which I have implemented in a gallery on a separate page) to allow users to click designated areas and have the Photoswipe UI appear. This would be preferable, if it's possible, due to the sleeker UI and ease of captioning.

Imagemap code:

<div class="sitebox">
<img name="aerialmap" src="images/aerial2.jpg" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
    <map name="aerial2">
        <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
        <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2">
    </map>

Image map resizer:

https://github.com/davidjbradshaw/image-map-resizer

If more code is required to get a picture of what I currently have implemented I will provide it.

Answer 1

I guess this is what you need

$("area").mousemove(function(e) {
    $("#image").show().css({
        left: e.pageX + 10,
        top: e.pageY + 10
    });
});
$("area").mouseout(function(e) {
    $("#image").hide();
});

#image{
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sitebox">
    <img name="aerialmap" src="http://www.getmapping.com/sites/default/files/styles/post_image/public/quick_media/getmapping_aerialimagery_vertical_hamptoncourt_1_0.jpg?itok=tNmyWk21" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
    <map name="aerial2">
        <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
        <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2">
    </map>
</div>
<img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG" />

EDIT

Here is a fiddle using different images for each area. Each area has a data-image attribute to a relevant image url.

https://jsfiddle.net/ergec/gse19j0b/

Answer 2

<script>
    function MO(x){
        document.getElementById("a").innerHTML=x=='ov'?"<img src=\"http://www.w3schools.com/jsref/smiley.gif\"></img>":"";
    }
</script>
<div class="sitebox">
<img name="aerialmap" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/290px-Lion_waiting_in_Namibia.jpg" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
<map name="aerial2">
    <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
    <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" border="2" title="Building 2" onmouseover="MO('ov')" onmouseout="MO('ou')">
</map>
</img></div>
<div  id="a"></div>

Does this help?