Good day. Tell me how to implement our plans.

I came up with the idea to make a schema-catalog (by type of metro scheme). That is, a picture is a map with 20 points (for example, points). It looks like a metro map (ideally, in general, background). Each point (station) is a link. the problem is not how to do it, but how to attach it to a specific point in the picture and at the same time so that when scaling it does not slip. Remotely, it should remind http://mosmetro.ru/metro-map/ this. Prompt open examples if there is or at least a direction. Thank.

    2 answers 2

    There are 2 options for solving your problem:

    Option 1 - you use jpg \ png, then you need to take the opportunity to set the area for an example, you can look at the example here and here and by clicking on the area you can do whatever it pleases

    Option 2 - use SVG for the metro scheme. Then you can set each element in the image id (or, preferably, a certain attribute) and, when you click \ hover \ any_other_Event, do everything your heart desires using js + css for SVG (if it is inserted into html itself, and not with a picture ) all selectors will work in both css and js.

    For me personally, the 2nd option is most preferable, since the first option may still have a problem with adaptability, and drawing an area on the pictures in principle is quite labor-intensive, in SVG it is easier to prescribe necessary attributes at the drawing stage and that's it. And besides, on the website you cited as an example, the second variant is used.

      Markers must be positioned on the map in absolutely percent. It is very important to keep the aspect ratio of the card, see as done in the snippet. The aspect ratio is given by padding-bottom.

      .map { position: relative; display: block; width: 100%; height: 0; padding-bottom: 50%; overflow: hidden; } .map img { position: absolute; display: block; width: 100%; height: auto; top: -80%; // выставляем видимый участок карты left: 0; } .marker { position: absolute; display: block; color: red; width: 10px; height: 10px; } .paris { left: 27%; top: 63%; } .moscow { left: 80%; top: 18%; } 
       <div class="map"> <img src="http://mapeurope.ru/wp-content/uploads/konturnaya-karta-evropy-10klass.jpg"> <div class="marker paris">x</div> <div class="marker moscow">x</div> </div>

      The top property: -80% sets the visible area for this particular card and is not required.

      • I apologize for being absent for so long. hmm An interesting option. Indeed, this is probably the easiest way to realize my idea. Thank you. - Beer And Bear
      • Good decision .... Well, no one appreciated .... - Air
      • @Air ru.stackoverflow.com/help/badges/51/unsung-hero?userid=220220 bgggg ))) - KAGG Design
      • Well, at least the system evaluates))) - Air