Online Image Map Editor

Hey guys, this is Mac Heads 11. Today I'm going to be showing you how to make image maps with your with the internet, with this website I'm going to show you.

So first off, an image map, but that is okay. I have this picture; it looks similar to the Apple toolbar, except for I changed it up a little. I changed the Apple logo and the way it was written where it says. So um, I was going to use this far would say, but things changed around a bit, and we didn't design it like a commonly we thought we were going to, but whatever.

So um, here's our toolbar—that what my our toolbar—the toolbar we're going to use for this tutorial. First, I'm going to be showing you what it is. So if you go to apple.com, this is Apple’s—is this what Apple's toolbar looks like? But this is what their toolbar actually is: all these images.

So what are all these images? The first one says this, which it should look like. The second one says it's what it should look like if your mouse is hovering over it. The third one says what you look like your mouse is clicking on it, and the fourth one says what it should look like if you have already been there.

So what I mean by that is, if I hover over it, I see this. If I first off I see this; if I hover over, I see this; if I click down, I see that. If I clicked and I'm at that site, I see that. So there we go. They use the same toolbar for all of their pages.

So how can we make a toolbar that goes to all these different things? You can just click the link in the description of this video. I'm going to go this site and go the same site by link in the description of the video.

Now it says select your source. That means how you're going to get your image. You can use an image on your computer, which is what I'm going to do, then upload one. You can use one on the internet, so you find a nice toolbar on the internet, then you can use that, can use one of their images.

So I'm going to browse for one of my computer—that's the one I just showed you now; you upload it. Okay, so now you can do that, and then you select your method. So I'm going to accept that now. My toolbar is going to load.

So first off, I say rectangle tool. You can make it a circle or a polygon, but I'm going to use the rectangle tool. So I choose a rectangle, and I choose where I want the link to start. Try to click there and click where I want to link the start, sorry. Then I dragged out where I want it to end, so now we have a good link that's ready to work.

I'm just going to delete this one for now; sorry, I don't know what I was doing. Okay, so I'll redraw that; I don't know why I deleted that.

Okay, so you click back on this one so you can edit this one. You right where you left— you always have to type HTTP because it’s a link, colon, slash, slash—and then where you want it to go, closely apple.com. Target set this window means it goes on whatever window they're on; we'll go to that website next. There's a new window; that means it'll open kind of like a pop-up window, and that will bring that to apple.com. Or I can just hop this window; that means a new tab. I'm just going to say this window; that's what I recommend.

So now I can zoom back out and do the next one. Then I can just drag out, click, drag out, make another link. Okay, so once I did that and I have this selected area, I write the href. I'll say um HTTP colon slash slash macheads101.com. Now I can say target, I'll say this window.

Then I can choose the third one; this is the last. 11 do just you get how it works. So I click, I drag, and then I say the target, which is going to be HTTP colon slash slash youtube.com, and I say target this window.

Okay, so now under the code. Okay, so now once you did that, if the status is ready, that means it's ready to roll; whatever you are. If it's not ready, that means you might have forgot a link or something. You just copy all this code; this is the code that you need for it to work.

Now you can leave this website; I'll just minimize it. There we go, and open a text editor. I'll just open Taco HTML, edit it, because it loads faster, because it's not as big. Now first off, you want to do is embed the image; an easy way to do that is: most websites, most things, have an embedders built in.

So I can just use the built-in embedder because I'm too lazy to type out the code alignment, sorry. So now here is the image, and then I paste the code that we got from before. Okay, now if I preview it, it doesn't work.

Who wants to know why? I'll tell you why: because um, where it says map ID, map name, we never—that tells it which picture it should apply to. But we don't have a picture name for that. So how do we name a picture? It's not what the picture is called; it's the title of whatever.

So first off, you're going to want to press ENTER in between here, these two lines, give it a different map ID, because I don't think you're going to get confused if they're random numbers. I'll call it toolbar, and then I'll call this one toolbar. It doesn't really matter what you call it as long as they're both the same.

Now I'm going to add something here. What do I add? This is what I had. Use map, no spaces, equals because it's um telling what thing to use, whatever quote number sign, which is shift three, and then in between these two things you say whatever you called it.

So I say toolbar to spell it right, of course. Now if I do that all correctly, I can save my—I don't have to save this untitled thingy, whatever. So now I can preview it, and these links don't work because I never set them.

But watch, watch carefully! Right now, it’s just a regular image until my mouse has the mouse side. But all of a sudden, when I go over this line, my mouse gets the hand sign, which means it's clickable. So I click there, and it brings me to youtube.com, which means we successfully made our thing.

You can click and it goes to apple.com. So right now, that worked. So I'm just going to give you all this code, which is not the coordinates for yours, but it's coordinates that are good enough—not because—but it's that way if you forgot something like how to use the map ID. I'm going to put this all in the description of the video, as well as the website URL that was the tool that helped us make this.

So thank you for watching. Have a nice day. Goodbye, and remember to subscribe to Mac Heads 101.