Here's a simple map without any hacking. All I did was change the tooltipster to target the areas and added that code to the responsive js script. The bold parts are the only thing I altered.I also made the http -> https for google.
https://ericrohloff.com/coffeecup/ccfor … oltipster/
Copy this to the footer of your page.

Copy this to the head.

Add all of the files in the attachment to your resources main directory. If you want them some where else alter the code provide to point to the directory.
Add an html element to your page a paste the body code with the <area> tags the image mapper provides in to it.

Youse guys is da greatest! Until this discussion, I had never heard of Tooltipster. Now that "time-hole" I opened by trying to adapt ImageMapper, suddenly has a bright future on the other side.

Also, knowing about these things has changed the way I write.

Many thanks, Eric and Inger!

Alas, responsiveness continues to escape me.

You can make your image map responsive in SD3 by using background images on the html element you pasted your code in from Image Mapper. Since the image map only cares about the size of the picture you used, you can replace it with a transparent gif or png the same size as the one you used in Image Mapper after you have finished. Then simply add background images to the html element at the various breakpoints for sizing. Make sure you set the backgrounds to contain not cover.

Eric:
In your example textpop, you show a textbox upon clicking a face. This is what I would like to use to explain geologic features on satellite images. I have looked through "iamceege.github.io/tooltipster/" several times, but cannot figure out how you assign a particular tip to the face (clearly a mapped and named area on the image). The link has to be in the html element, what does it look like?

Twinstream:
<<You can make your image map responsive in SD3 by using background images on the html element you pasted your code in from Image Mapper. Since the image map only cares about the size of the picture you used, you can replace it with a transparent gif or png the same size as the one you used in Image Mapper after you have finished. Then simply add background images to the html element at the various breakpoints for sizing. Make sure you set the backgrounds to contain not cover. >>

Do I have to make a new image map for each of the "background images" mentioned above?

My problem is that I don't necessarily understand where files are supposed to go or how to get them into their proper place.

I dumped my project into an _exported folder that had three sub folders: css, fonts, and js. js has a bunch of versions of jQuery. The main folder has all the jpg versions, including the satellite image for the image map, and index.

Should all of the js files, including for tooltipster and ImageMapResizer, be in this js folder? Some are in the exported folder but this may be my mistake.

Should all the css files be under css? How do I do that for the working version that I dump to Preview?

I haven't had time to look at the files Eric posted, but in general can be said that if a file is mentioned in a path to some resource, it is important that the respective file is put where the path says in should be. As an example, the test project I posted for you along with the description recently, Image mapper had copied the image into the root folder that was produced as 'whatever_exported', and this was written in the script that you pasted into that footer section. Therefore I suggested that you add the picture and the js file right into the root of SD, not into any subfolder. So if there is a bit of script along with what you got from Eric, you can check if it says something like ... images/picture.jpg... which is telling you that the picture is expected to be in a folder named 'images', and then you need to create such a folder to stick the picture into. Similar with ...css/styles.css... or ...js/script.js... (the names here are of course only examples).
I hope this may help a little.

Make your image map and add the info for each area that you want to show with a tool tip by entering the Alt text in the Image Mapper. That's really the only thing you need to enter for Tooltipster. I have my files in the root directory of SD. You can place them all in a sub directory if you want but you need to adjust the path in the scripts.

Thank you, Eric,

I’m getting there but slowly. My tips now display long blocks of text. You have formatted your tooltips in textpop and I would like to do that for mine. I have gone through the documentation for tooltipster several times but cannot find the instructions for that. Wayan’s comment about my experience seems truer every day.

Responsiveness continues to elude me. Your map in “textpop” resizes nicely but, if you have told me how to do that, I have not understood what you wrote. Hennie suggested I use imageMapResizer from GitHub. Looking at the directions, it says “add the following call to the bottom of the page.” $('map').imageMapResize(); I assume the word in single quotes (‘map’) somehow refers to my graphic but I don’t know which of the things in my html that ‘map’ stands for. I presume that imageMapResizer would need to know which image to resize.

Is this a case where my lack of experience is so great that I’m unlikely to ever make it work?

Do you have a current link to your work so we can guide you?

It's in the usual place. send me an address to dan@pinacate.org and I will send you the exported folder that would go to my host with everything in it.

http://pppotscom.coffeecup.com/index.html