How can I click on a link which opens an image, then only display part of that image

Question

I have a large image of a map with points of interest on it.

What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.

I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.

Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.

Here is a small guide of what I'm tring to achieve.

Image showing how this works

    <style>

.map-one {
  background: url('map.jpg');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

</style>

<button><a class="map-one" href="map.jpg">Click</a></button>

This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.

Answer 1

Well it doesn't work with just pure css, you have to pass some parameters to your new window. So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.

First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:

<div id="mapviewport">
<div id="map">
</div>
</div>

So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden . The map container gets the width/height of the map. The map is provided via background-image on the map-container.

Now to scroll to the right position, use . scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.

Answer 2

You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:

Main page

<a href="map.html" target="_blank"><button> <!-- Map page path -->
    CLICK ME!
</button></a>

Map page

<style>
    div.map {
        background-image: url('map.png'); /* image file path */
        background-position: 70px 90px;   /* image position  */
        width: 200px;                     /* image size      */
        height: 200px;
    }
</style>
<div class="map"></div>