How can I get an image map to highlight various parts with mouse hover?

Question

I am using SharePoint 2010 and I'm trying to use javascript and html to create an image map that highlights different sections of the image depending on where the cursor hovers over. In this case I'm actually using a literal map (one of Australia) and want the different states to highlight as the mouse pointer hovers over them.

I've used image maps many times in the past within SharePoint 2010, just by using basic html, but this is the first time I've tried to use one that highlights part of the image as it's being hovered over.

This is the approach I'm using:

• I've inserted a Content Editor web part into a wiki page

• The code I'm using tries to achieve this effect by using multiple images.

• One image is the map of Australia (all in one colour with a transparent background). This entire image is the 'background' image that appears when you first load the page or when there's no mouse pointer over it.

• The other eight images are identical except that the state/territory I want highlighted is in a different colour (to create the highlight effect).

At present, the code I'm using is loading the images, and when I hover over the state/territory the cursor recognises the link.

The problem is that all images are being loaded on the page separately (i.e. one below the other) and therefore there's no highlighting effect taking place. That is, I see all images simultaneously.

Here is the code I'm using:

<script type="text/javascript">
$(document).ready(function() {

    $(".map-areas area").mouseenter(function() {
        var idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    });
    $(".map-hovers img").mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    });

});</script>

<div id="container">
<img width="528" height="467" class="map-trans" alt="Map / Carte" src="/GASites/ITXCommunicationsExchange/SiteAssets/Site%20Pages/TEST/Maps_australia_Transparent.png" border="0" usemap="#states"/> 
&#160; 
<div class="map-hovers"><img width="528" height="467" alt="QLD" src="/GASites/ITXCommunicationsExchange/SiteAssets/Site%20Pages/TEST/AustraliaImageMapQLD.png"/> <img width="528" height="467" alt="NSW" src="/GASites/ITXCommunicationsExchange/SiteAssets/Site%20Pages/TEST/AustraliaImageMapNSW.png"/> </div></div>
<map name="states" class="map-areas" id="states"><area href="#d0" shape="rect" coords="352,0,520,230" alt="QLD"/><area href="#d1" shape="rect" coords="352,235,520,340" alt="NSW"/></map>

Note: - In the code above I've only loaded some of the images while testing.

QUESTIONS:

• Since I'm not very good with javascript, and only average with html, I'm wondering if I've missed something obvious?

• Can anyone offer any other suggestions, either on how I can get this to work or how else I might achieve what I'm trying to do?

NOTES:

¹ At the organisation I'm trying to do this for we do not have access to SharePoint Designer, so any suggestions involving that will be unusable for me.

² Finally, it really was a flip of the coin in terms of whether I posted this here or on Stack Overflow. I opted for here since I am trying to get this to work within SharePoint 2010, but if the view is that this should be migrated, please let me know and I'll delete this and post it there instead.

Answer 1

I've done something similar for a web page a few years ago, however I did it using only Javascript and HTML, no jQuery. I think I used a site that let me draw the coordinates for the image map like https://www.image-maps.com/, then I used onMouseOver and onMouseOut to have the highlight effect. I had an image that had no highlight effects as the default image that the code would reset to.

Here is an example of the code:

HTML:

<div id="mainCampus">
    <img name="defaultImg" usemap="#campus" src="images/campus.png" width="606" height="385" alt="Map of main campus" />
</div>

<map id="campus" name="campus">
     <area shape="poly" alt="Softball field" coords="108,47,89,85,4" href="/virtualtour/main/fields"  onMouseOver="softball()" onMouseOut="campus()">

     <area shape="poly" alt="Baseball field" coords="86,92,74,133" href="/virtualtour/main/fields"  onMouseOver="baseball()" onMouseOut="campus()">
</map>

Javascript:

function campus(){
    document.defaultImg.src="/virtualtour/main/images/campus.png";
}
function softball(){
    document.defaultImg.src="/virtualtour/main/images/softballField.png";
}
function baseball(){
    document.defaultImg.src="/virtualtour/main/images/baseballField.png";
}

Edit: There is one problem with the code though, the images don't autoload, so it requires moving the mouse over the sections for the images to load. I didn't figure out a way to autoload the images before running the page, but I'm sure it isn't hard.