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:
Note: – In the code above I’ve only loaded some of the images while testing.
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?
1 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.
2 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.