search

JAG240 / Pokemon-Map

Pokemon Map Project
2 stars 0 forks source link

Resizing Image-Mapped Kanto map: Some Helpful JS #11

Open ebeshero opened 5 years ago

ebeshero commented 5 years ago

I found some JavaScript code on a Stack Overflow post that I think we can adapt to help dynamically resize the Kanto map without losing @JAG240 's image-mapped coordinates (without converting it to SVG, etc.) Let's try testing this: http://jsfiddle.net/32rx6/2/

If this works, we can set the Kanto map in a flexbox and the image-mapping should scale dynamically with space we allow it in the browser.

ebeshero commented 5 years ago

@JAG240 @achen298 I'm working on your flexboxes, and I got them to work to display side by side, and to apply flex-shrink. However(!) the image map coordinates are now off when I load the page, so I'm going to try the JavaScript solution I linked above. The code I pushed to the repo just now only handles the flexboxes so you have the image map side-by-side with the iframe. Also, I added an @name to your <iframe> and a @target attribute to each of your <area> elements so that each area link on the image map is set to open in your iframe.

ebeshero commented 5 years ago

@JAG240 @achen298 Okay! I've implemented the JavaScript that re-calculates image map coordinates based on screen resizing--and it works really well! I'm a little worried, though, because when I open this locally (from the GitHub repo in a local browser window), the image map boxes aren't in the same place as where I see them on http://pokemon.newtfire.org/. It might be because we need to push the changes up to the website,, but I'm not sure. Three things to note:

1) Flexboxes and this JS happily work together: I can see how a box marked on the image map relocates itself live as I shrink the screen. I think this is a good solution to control the layout and make it responsive--so that the image map adjusts itself. 2) I'm worried that even so, we may need to redraw the image map--but I have not posted this code on your website. 3) I noticed that your SSI is set to put a whole HTML file inside an HTML file's <head>. That makes the page be not well formed, though the web browser is forgiving and still displays your navbar. If you drew the image map on your screen with this setup, I wonder if it distorts the coordinate system on screen? If we find that we need to redraw the image map, I would urge that we correct the SSI problem first, so the page is well formed before we continue.

ebeshero commented 5 years ago

@JAG240 @achen298 To see the new files, look at these, and open them locally in your web browser.

You may want to post these file in your newtfire webspace, to see how they behave there--but see above--it's important to fix the problem with your SSI.

ebeshero commented 5 years ago

I've prepared a mockup of a flexboxed index page here: http://pokemon.newtfire.org/index_ebb.html

The boxes aren't set right, BUT they do move properly in line with the image as it scales.

ebeshero commented 5 years ago

@JAG240 I just saw the new image map on your index page with the side-by-side layout--it looks great! Congrats! :-)

JAG240 commented 5 years ago

@ebeshero Thanks! I think we're almost finished up with the website just need to see if @achen298 finds anything he wants to change up.