How to image map

About a month ago, I became a YouTube Partner.

If you don’t know what a YouTube Partner is, you probably don’t monetize your YouTube videos. Basically, I’m part of this exclusive YouTube Partnership Program. I applied and they thought my videos were totes awesome and now I get special YouTube privileges, such as a channel with clickable links in it. (Isn’t it pretty?)

This pretty background with clickable links in it is called “image mapping” and I’m going to show you just how simple image mapping can be.

1. Ok. I know this website isn’t pretty, but it works. First I select, “Choose file” on my PC (I don’t have nor will I ever have a PC again but nonetheless, this is the option to choose). Then, hit “Start mapping my image”.

2. This is what the next screen looks like (again, not pretty). You may have to wait a few seconds, then select “continue to next step”.

3. Now this page looks a little more intimidating. No need to read all that junk. All you have to do is select “Rectangle” or “Custom shape” depending on the area you would like to be clickable. I’ll choose rectangle for two reasons, 1) simplicity 2) the clickable area is not as tight as it could be. Last time I did this, my rectangle went a little further one way than I intended. In other words, a bunch of white space became clickable for no reason. Ipso facto, rectangle is the way to go in this situation.

4. Now I select which image I want to be clickable to send my fans to a specific link. I move the box around my logo and put my volleyball drills website link in. There are several other options down the right side of this page, but we are first timers and we are going for simplicity. If you ask me, I’d say leave those alone until you have time to really explore the options. Oh, and select “SAVE”.

5. Select “Get Code”.

6. When I got to this screen, I was like WTF? That is a lot of reading and none of it looks like code. Code is what we’re looking for here. So, up top, select the tab “HTML Code”.

7. There we go! That looks better. You’ll want to copy that code and place it wherever you want. I put mine in my YouTube Partner header.

See that warning in orange, seems serious, so (if anything on this page) you better read that. Basically, they don’t want your image on their website forever. So you’ll need to make sure your photo is somewhere else. For example, I put mine in my “Media” on my WordPress site like so. Make sure to copy the “file url.”

This is where it gets a teeny bit complicated. You’ll have to edit that HTML. Just a little. You have, in fact, uploaded your image somewhere else. So you’ll have to change that fact in your code. Don’t worry, I’ll show you how.

8. Now, paste your file url (the one from your wordpress site or wherever) in the code right here. Then select all and copy.

9. Now, I pasted that copy into my YouTube channel header (for Partners only).


side note: see where it says “Banner Height”? I made my banner 150 px tall and I made my channel start 150 pixels down the page, so my fans could see my entire lovely banner.

Wasn’t that easy? Once you get your image design, image mapping really takes no time at all.

Now, if anyone has any suggestions on how I can modify the HTML for the background on an Admired themed WordPress blog, please let me know! I would love to image map my background on my volleyball drills website.

One thought on “How to image map

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s