ebeshero / DHClass-Hub

a repository to help introduce and orient students to the GitHub collaboration environment, and to support DH classes.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Image-Mapping

ebeshero opened this issue · comments

The Undertale team is working on image-mapping, to make images of the game map be clickable and contain links into their site pages, like what the Pokemon team did last spring: http://pokemon.newtfire.org/

In case other project teams are interested in how to do this, here are some resources on image mapping, looking at the code under the hood.

  • You need a good, free image-mapping tool to do this, and I recommend this one: https://www.image-map.net/
  • Here's the issue I posted for the Undertale team with an explanation of the Pokemon project's image maps from last spring: ajw120/Undertale#18

Now, the problem with image-mapping this way is that it's old-school 1990s technology, and the coordinates do not scale and respond well to things like CSS flex boxes, or your decision to make the image fit on half the width of the page. So to make this more responsive, it's best to use SVG image mapping, and the Bloodborne Lore team did this last spring: http://bloodborne.newtfire.org/map.html
Here are some resources we consulted to do SVG image mapping. #652