Image Mapping

[ebeshero]

@Bennediction @bobbyfunks @ajw120 So I hear that you'd like your images to be clickable and responsive like those on the Pokemon Map project. Basically, we're going to find a free image-mapping site on the web that will help you highlight areas of your image and generate some map code for you that you can then work with to include links to your project files.

I want to show you what that looks like in code for the Pokemon project: Let's take a look at the source code for that page: view-source:http://pokemon.newtfire.org/ . Basically, the mapping code will look like this, just isolating the <div> in the Pokemon index page that contains a Kanto.png image file, and the image map code associated with it:

<div class="kanto">
                <img src="Images/Kanto2.jpg" id="KantoMap" alt="Kanto Map" usemap="#Kanto"/>

                <map name="Kanto" id="Kanto">
                    <area alt="Pallet Town" title="Pallet Town" href="citytownHTMLframe/PalletTown.html" target="mapInfo" shape="rect" coords="292,346,321,375" />
                    <area alt="Route 1" title="Route 1" href="routesHTMLframe/01.html" target="mapInfo" shape="rect" coords="290,274,320,341" />
                    <area alt="Viridian City" title="Viridian City" href="citytownHTMLframe/ViridianCity.html" target="mapInfo" shape="rect" coords="274,232,321,271" />
                    <area alt="Route 2" title="Route 2" href="routesHTMLframe/02.html" target="mapInfo" shape="rect" coords="292,134,327,228" />
                    <area alt="Pewter City" title="Pewter City" href="citytownHTMLframe/PewterCity.html" target="mapInfo" shape="rect" coords="291,87,340,133" />

 <!--LOTS MORE OF THE SAME KIND OF MAP CODE HERE  -->

                    <iframe src ="citytownHTMLframe/PalletTown.html" height="572" width="475" name="mapInfo"/>
                </map>
            </div>

The Pokemon team decided to try an <iframe> element that basically lets you make a window in their index.html page that lets them view another page through it (instead of closing the index page and clicking out to another page. Read about iframe here: https://www.w3schools.com/html/html_iframe.asp You may or may not want an iframe window on your page. But the image map code works like this:

• The <area> elements in your image map contain @href attributes that hold links to wherever you want to go on the site.
• If you add a @target attribute, you can make those links open in an <iframe> window you've created on your page. The @target value just points to the name you give your iframe.'
• Notice the <iframe> element is set with a @name attribute (here it's "mapInfo"), so that matches the @target on your <area> elements. The @src attribute is set to hold a page that you want to see when you first load the index page in the browser. Then as the visitor clicks around the image map, they can open new pages in the iframe portal.
• If you're not using an <iframe> don't bother with those @target attributes. You will just need to use @href to hold your internal links to project HTML files. And then your visitor will just click on the areas of the image map and link out to new pages in your project.

This doesn't use JavaScript at all, as the map areas and links are all handled in HTML elements and attributes.

[ebeshero]

So, let's start with actual image mapping software on the web! I'm looking at some free online image map making services right now. One thing I'm noticing is that your image files are very large! It would help to save them in a reduced file resolution (you probably won't lose any detail in doing this...) I might do this from here and push up the reduced file sizes for image mapping...stay tuned a moment.

[ebeshero]

Actually, no...your core_map.png isn't that large at all. Let me see if I can find a good service for image-mapping it...

[ebeshero]

Okay! I like this tool for working with your game images: https://imagemap.org/ Notice:

• You click on a shape (rectangle, circle, etc.) and click to drag the grey shape so it surrounds the area you want to make clickable.
• You type in the @href (the link you want to make to your file), and give it a title.
• And it generates the map code for you. You basically want to paste that into your HTML file so it follows after your <img> element holding the image.
• The image map is basically clickable code. It's a lot like SVG, really. (And indeed, there are clickable SVG's. You're just making a PNG image file be clickable, too, by using screen coordinates.)
• You can go in afterwards and add what you need for an <iframe> if you want those pages to open in a little window portal on your index.html page.

[ebeshero]

Let's keep your HTML page holding the game map super simple for now and let your image take up the full width of the page. (Let's not try anything fancy with CSS flexboxes between an iframe and your map). Just plan on the map taking up the full screen of your page, and maybe the iframe appears below it. Or you just open a new page in your site to go to that area and read the script.

[cozyycoding]

used the image mapping program and copy pasted the code, the image mapping isn't lining up how the website said it would, and some of the bitmapped squares aren't showing up in the image at all. I will push up this version of the index.

[ebeshero]

@Bennediction Uh oh...Let's see what's going wrong then with the coordinates. Do you have some sizing/scaling CSS on the image as posted on your website?

[ebeshero]

Because that would cause the image map not to line up. We may want to do the image mapping over again, and use coordinates as absolutely as we can--that is, make your image only be the absolute width in pixels that you need it to be on the page.

[ebeshero]

(To do that, we'll need to re-size your image file, before redoing the image map.)

[ebeshero]

@Bennediction I figured out what's going wrong with the image you want to map. The issue is that it's sitting inside a flex display box, and it's being displayed at 50% of its original width. That's a problem: image maps are a sort of old web technology and the coordinates they generate are absolute: unlike SVG, they won't scale. To deal with this, you can either redo your image map as an SVG file, or we can proceed by simplifying your index page so it's not using flex boxes. I think that should be okay, because when I look at your image by itself on the web, I see: http://undertale.newtfire.org/images/map_undertale.jpg

And on the website, do you see how that is shrunk to half its size? http://undertale.newtfire.org

So, remove the div container holding that at 50%: change up your code base for index.html so it's not using flex containers for this main portion of the page. Also, if you can edit that image file, I'd simplify it by removing the big empty borders around the image: trim it, so the actual map is what's taking up space on your page. Do you want help with that? I'm used to editing images, so I can do it if you need help there.

[ebeshero]

Here's the CSS that's telling the div.left and div.right to rescale themselves at 50% of the page width:

.left,
.right {
    display: flex;
    width: 50%;
    height: 100%;
    flex-direction: column;
    align-items: center
}

Also, why is the div with your image and map sitting inside an <h3> element on your index.html?

[cozyycoding]

I removed the h3 and div element, resized the image and redid the image mapping, but now the image mapping wont show up at all on the image and I'm not sure why

[ebeshero]

@Bennediction I don't see any change on the web server...On the web, when I view the page source, I see:

<h3> <div class="right">
--
  |  
  |  
  | <p><style>
  |  
  | img {  display: block;
  | margin-left: auto;
  | margin-right: auto;}
  | </style><center><img src="images/map_undertale.jpg" alt="map" style="width:100%"usemap="#image_map">
  | <map name="image_map">
  | <area alt="ruins" title="ruins" href="ruins.html" coords="40,240,178,325" shape="rect">
  | <area alt="SNOWDIN" title="SNOWDIN" href="snowdin.html" coords="180,156,399,237" shape="rect">
  | <area alt="WATERFALL" title="WATERFALL" href="waterfall.html" coords="400,157,711,232" shape="rect">
  | <area alt="HOTLAND" title="HOTLAND" href="hotland.html" coords="714,121,850,228" shape="rect">
  | <area alt="core.html" title="core.html" href="CORE" coords="785,75,854,118" shape="rect">
  | <area alt="NEWHOME" title="NEWHOME" href="newhome.html" coords="890,-118,1011,-18" shape="rect">
  | </map>
  |  
  | </center></p>
  |  
  | </div></h3>

[ebeshero]

@Bennediction You'll want to remove the@style attribute on the <image> element, too.

[ebeshero]

@Bennediction Also, if you altered the image file, be sure you post the new image file on the web server, too!

[cozyycoding]

newtfire has been updated as of now

[ebeshero]

@Bennediction Hmm. Okay, I notice that you still have a @style on the <image> and that the <image> element isn't self-closed. Also that it's sitting in a <center> element which is deprecated in HTML. I'm not sure if any of those things are the problem...

[ebeshero]

@Bennediction On the <image> element, instead of style="width:100%", change that to just width="100%", or remove that entirely...Or wait, and I'll try that here and see if it does anything.

[ebeshero]

Hmm... I don't understand what's happening, but I'm tinkering. One thing that's bothering me is that the image map uses negative numbers in its area coordinates, but I don't know if that's the problem. We could try a different image mapping program, maybe. I'm trying that locally here.

[ebeshero]

@Bennediction Okay, I now think we want the margins around the image, if we're going to be looking at it filling the width of the page. I'm restoring the original image file as it was with the margins, but I'm also going to try mapping it here.

Another option to consider is to convert your image to an SVG file so its coordinates are actually responsive to scaling on a website. This is a little more complicated but possibly worth it. The Bloodborne Lore project wound up converting their game map to an SVG last year, and it helped them to make it a lot more interactive. See http://bloodborne.newtfire.org/map.html

[ebeshero]

@Bennediction I'm now thinking that the image map site I sent you to is annoying and perhaps unreliable because the coordinates I draw seem to shift as I'm looking and checking them. I'm now trying this site instead: https://www.image-map.net/

[ebeshero]

@Bennediction @bobbyfunks @ajw120 I just restored your earlier version of the game map with margins, as that will fit better on your page. And I'm seeing if I can get that image mapping to work here. Do a git pull...

[ebeshero]

...and if someone just wants to post that map_undertale.jpg on the newtfire server that will be great. I'll see if I can get your image map working here, and you all can do other more crucial things on the project!

[ebeshero]

Image map is working now. :-) Pull it in and take a look on your browsers, and please put up your new index page and CSS file on the web server.