Client Side HTML / CSS hot-spots - repost

I know next to nothing about HTML, CSS or Javascript but I managed to get a start. Save the attached jpeg on your hard drive and enter the path to it in the attached HTML <img alt="" src="C:\ .... and it will run okay with CSS hot-spots in Google Chrome. This needs to be self-contained, meaning no Internet connection needed. This needs to run in all modern browsers (this example hot-spots are not the same in IE) and not contain code that will be obsolete in a few years. If what I'm asking for is not practical in CSS you can rewrite some or all of it in JavaScript. But I want the finished product to work with the attached jpeg please. Please add the following functions: When the user clicks on a hot-spot show a pop-up type of window in the upper left that does not move when the user scrolls the main window. I say "pop-up type" because this window will contain more HTML content and function like a normal browser, meaning formatting, links, etc. need to work. But it will look like a pop-up with just a simple border and scroll bars when the content is too big to fit. When the user clicks anywhere outside of the pop-up it should close or hide. Please insert some test HTML content/text somewhere in the finished product for all three hot-spots. Please test on all popular browsers. Thank you.