Saving an image (CSS or Javascipt)

The following site has an interesting interactive image that i would like to save.
https://www.gcflearnfree.org/access2013/getting-started-with-access/1/

I tried to save the whole page; but when i tried to open it its giving me a blank white page. I downloaded the webpage as a CSS it gave me only the html with no folder that contained the images and any other files that comes along. When i opened the save html it has everything i wanted with the interactive image. I tried to open the html in an html editor to delete everything on that webpage to keep only the interactive image it wont open, its giving me an error. Is there away to get that image with all its element? is the interaction on that image a CSS or a JavaScript format?
Your help is most appreciated.

Just to make it clear. Its never a good idea to just “steal” whole images and scripts from a website. If you want to copy something that you see, try to recreate it, learn and teach others. Stackoverflow is a perfect buddy for you while learning. Dont ask how to steal, ask people for help you and others.

Regarding the topic: I did a bit of research and the thing that you are looking for is called “Hotspots on images”. Found some ready-to-use scripts on the internet, maybe that helps:

  • http://www.inabrains.com/tooltip/examples/image-hotspot.html
  • http://aniruddhanath.github.io/jquery-hotspot/
  • http://www.jqueryscript.net/other/jQuery-Plugin-To-Create-Editable-Hotspots-On-Any-Elements.html
  • https://codecanyon.net/item/image-map-pro-jquery-interactive-image-map-builder/2792438?clickthrough_id=1059339530&redirect_back=true&ref=lvraa
  • https://www.dopeless-design.de/dopeless-hotspots-jquery-plugin-easy-hotspots-integration.html

Besides this you can add several hotspots and position them over your image. Then you would only need to search for a solid script to implement tooltips (but there are already very good css-only solutions)