How To Image Map Video

Get it off your chest – be the first to comment on this video!

How To Image Map

How to Image Map Hey, YouTube. It’s Tech Support Gone Bad and today I'm going to be teaching you how to image map. Now for those of you sitting there saying what is an image map, what does this got to do with me, why am I even watching this tutorial. Well, you do know what an image map is. Trust me, most of you have probably seen an image map at least once on the internet because they are very popular on the internet and you probably didn’t know that it was an image map. Now an image map is basically taking a certain image and putting a map over it and the map contains the information for different locations of that image and you could set your or point locations of that image to link to different URL’s. Now the most common place that I've seen image maps being used is on MySpace. A lot of professional musicians have their MySpace banner saying “message me, add me, visit my website, visit my store, buy my merchandise, buy my CD,” whatever but the MySpace banner always has bunch of links in the banner. Now, the MySpace banner is one image but it also has a bunch of different links. Those links are made by image mapping. You take the one picture and you put a button saying “message me, add me, buy my stuff, buy my CD,” whatever and then you image map all those stuff. You image map the message me button to link to the message me area of MySpace, the comment me button to link to the comments area of MySpace, the add me button to link to the add me area of MySpace. That is all done with image mapping. Now if you still are saying what is this guy saying. I've never seen an image map before or if you still don’t get what I'm saying here is an example of an image map that I've made. This is what I'm going to be teaching you guys how to make today. So here is the image map. It says “Follow TSGB at TechSupportGoneBad.com”. You click it and guess where it takes you. It takes you to TechSupportGoneBad.com. There you go, back to the image map. The next one is MySpace.com/TSGB. You click it and guess what it takes you to MySpace.com/.TSGB. You're going back to the image again. The last one is Twitter.com/TSGB. You click it and guess what it goes to Twitter.com/TSGB and that is an image map. I have one image and I took different locations of that image and made them link all to different URL’s. So let’s get started on learning how to do it today. Now at first when making this tutorial I wanted you to teach you guys how to make it from scratch. Take the HTML code and just insert all the information and just make it like that. Now that is very time consuming first of all and it just didn’t work because I got really aggravated. So what I did was when I search like losers and that is a good image generator. I've tested out a lot of them and the one I found the most useful, the most easy to use was this one. I don’t know how to pronounce it but it is about Meracl image map generator. If you ant to go this website, the links are very long so I'm just going to leave the link in the video description. I just want to click the link and go to this website and just download the program. It should be just like any other program download and once you have download the program you just want to open it up. So let it load and here is the program itself. Now you want to open up your image first of all so you want to go to file, new image map, load image from hard drive and open up the image. I this case, my image is the “Follow TSGB.jpeg. So I'm going to double click on that and it is going to open up your image and it’s also going to bring up the settings tab. Now it’s going to say how many maps you want so you use maps. In this case, I want to do three. You have fill in the rest of the information so I'm going to just press OK. Once you have press OK, now this is where you want to actually start applying the image maps. You have the choice of a circle, a polygon or a rectangle. Let’s say you wanted to choose a circle image map. You just click and drag the circle onto your image and as you can see it makes a circle for you. You can make it bigger or smaller whatever you want as long as it fits your image size. In this case, I don’t want the circle so I'm going to image delete shape. In this case, I want a rectangle so I'm going click and drag on the new rectangle icon and I'm going to fit it so it fits where it says TechSupportGoneBad.com and then I want to apply a link to it. I'm going to link it to obviously TechSupportGoneBad.com so don’t forget to put http://www. and then your link. Those don’t have to be TechSupportGoneBad.com obviously you could put your own link and the frame target you could just leave it as nothing. Don’t mess with it and it will link to the same page so we’ll load that same tab to that link or you could choose the blank frame target and it will open it in a new tab. In this case that is what I'm going to do. I'm just going to do it for this one too so actually two more times. This case is MySpace.com/TSGB and the last one on Twitter.com/TSGB. That’s it, you are done with your image mapping. Now once you are done you want to click on file and click save image map. Now you have two options. Either you want to copy your HTML code to your clipboard or you want to save the HTML code to the file. Saving HTML code will let you open it up later but in this case I don’t want to do that so I'm just going to copy the HTML code and press OK and it just says “It has successfully copied it to your clipboard.” Now you want to paste it to anywhere that takes HTML code. In this case I'm going to paste it to a new page on TechSupportGoneBad.com. I'm going to name the page image map test and I'm going to paste the HTML code. Now this program is not perfect. There is one flaw and only one flaw that I've found with the program. If you look over here it says image source and then it will save your file name. Now there is no way that it’s going to know which file to use because that file name is not located on my website server. So what you want to do is go to website hosting or an image hosting website like TinyPic.com, PhotoBucket.com and stuff like that and you want to upload that image. So I'm going to upload the Follow TSGB image to TinyPic.com, uploading please wait so we’ll give it a second here and then you just want to copy the direct link for layouts. Then you want to replace the file name and in this case it is Follow TSGB.jpeg. You want to replace that file name with the direct link to the file that you just uploaded and once you have done that everything should work fine. So I'm going to press save draft and I'm going to preview it. So once it loads up let’s give it a test, Follow TSGB@TechSupportGoneBad.com, you can click it and it should go to TechSupportGoneBad.com and just like that it went to TechSupportGoneBad.com. We’re going back to the image MySpace.com/TSGB. You click on it and just like that MySpace.com/TSGB. Now for the last two I've just notice that I forgot to set the target to blank so you see if you select MySpace.com/TSGB you see that the frame target is not set to blank so that is why it opened up in the same page. So let’s go back and let’s select the last one. Twitter.com/TSGB and again it opens up in the same page because I forgot to set the target to blank and there you go Twitter.com/TSGB. So that is how to make an image map. It is very simple using this program and another thing that I really like about this program is that if you ever have any trouble using the program or just don’t get how to use a certain aspect of the program just click on this help section right here. Just click on the help link and it will open up a new tab in your web browser Mozilla Firefox or whatever. It will have all of the questions that you could possibly think of for the program and just click on the question you want. Let’s choose the first one and there you go, it has the question answered right there. And that is a really cool thing about the program because it could help you out just like that right away. So that is how to image map an image. It was one of my most commonly asked questions so I've decided I should make this tutorial on it soon. I hope this tutorial helped you out and if it did please take a look at my website, TechSupportGoneBad.com and please subscribe to my YouTube channel at YouTube.com/TechSupportGoneBad. Until the next tutorial, I’ll see you guys later.

No Links were listed yet. Go ahead and share!

How to Image Map

Hey, YouTube. It’s Tech Support Gone Bad and today I'm going to be teaching you how to image map. Now for those of you sitting there saying what is an image map, what does this got to do with me, why am I even watching this tutorial. Well, you do know what an image map is. Trust me, most of you have probably seen an image map at least once on the internet because they are very popular on the internet and you probably didn’t know that it was an image map.

Now an image map is basically taking a certain image and putting a map over it and the map contains the information for different locations of that image and you could set your or point locations of that image to link to different URL’s. Now the most common place that I've seen image maps being used is on MySpace. A lot of professional musicians have their MySpace banner saying “message me, add me, visit my website, visit my store, buy my merchandise, buy my CD,” whatever but the MySpace banner always has bunch of links in the banner.

Now, the MySpace banner is one image but it also has a bunch of different links. Those links are made by image mapping. You take the one picture and you put a button saying “message me, add me, buy my stuff, buy my CD,” whatever and then you image map all those stuff. You image map the message me button to link to the message me area of MySpace, the comment me button to link to the comments area of MySpace, the add me button to link to the add me area of MySpace. That is all done with image mapping.

Now if you still are saying what is this guy saying. I've never seen an image map before or if you still don’t get what I'm saying here is an example of an image map that I've made. This is what I'm going to be teaching you guys how to make today.

So here is the image map. It says “Follow TSGB at TechSupportGoneBad.com”. You click it and guess where it takes you. It takes you to TechSupportGoneBad.com. There you go, back to the image map. The next one is MySpace.com/TSGB. You click it and guess what it takes you to MySpace.com/.TSGB. You're going back to the image again. The last one is Twitter.com/TSGB. You click it and guess what it goes to Twitter.com/TSGB and that is an image map.

I have one image and I took different locations of that image and made them link all to different URL’s. So let’s get started on learning how to do it today. Now at first when making this tutorial I wanted you to teach you guys how to make it from scratch. Take the HTML code and just insert all the information and just make it like that. Now that is very time consuming first of all and it just didn’t work because I got really aggravated. So what I did was when I search like losers and that is a good image generator.

I've tested out a lot of them and the one I found the most useful, the most easy to use was this one. I don’t know how to pronounce it but it is about Meracl image map generator. If you ant to go this website, the links are very long so I'm just going to leave the link in the video description. I just want to click the link and go to this website and just download the program. It should be just like any other program download and once you have download the program you just want to open it up. So let it load and here is the program itself. Now you want to open up your image first of all so you want to go to file, new image map, load image from hard drive and open up the image. I this case, my image is the “Follow TSGB.jpeg. So I'm going to double click on that and it is going to open up your image and it’s also going to bring up the settings tab.

Now it’s going to say how many maps you want so you use maps. In this case, I want to do three. You have fill in the rest of the information so I'm going to just press OK. Once you have press OK, now this is where you want to actually start applying the image maps. You have the choice of a circle, a polygon or a rectangle. Let’s say you wanted to choose a circle image map. You just click and drag the circle onto your image and as you can see it makes a circle for you. You can make it bigger or smaller whatever you want as long as it fits your image size.

In this case, I don’t want the circle so I'm going to image delete shape. In this case, I want a rectangle so I'm going click and drag on the new rectangle icon and I'm going to fit it so it fits where it says TechSupportGoneBad.com and then I want to apply a link to it. I'm going to link it to obviously TechSupportGoneBad.com so don’t forget to put http://www. and then your link. Those don’t have to be TechSupportGoneBad.com obviously you could put your own link and the frame target you could just leave it as nothing. Don’t mess with it and it will link to the same page so we’ll load that same tab to that link or you could choose the blank frame target and it will open it in a new tab. In this case that is what I'm going to do.

I'm just going to do it for this one too so actually two more times. This case is MySpace.com/TSGB and the last one on Twitter.com/TSGB. That’s it, you are done with your image mapping. Now once you are done you want to click on file and click save image map. Now you have two options. Either you want to copy your HTML code to your clipboard or you want to save the HTML code to the file. Saving HTML code will let you open it up later but in this case I don’t want to do that so I'm just going to copy the HTML code and press OK and it just says “It has successfully copied it to your clipboard.”

Now you want to paste it to anywhere that takes HTML code. In this case I'm going to paste it to a new page on TechSupportGoneBad.com. I'm going to name the page image map test and I'm going to paste the HTML code. Now this program is not perfect. There is one flaw and only one flaw that I've found with the program. If you look over here it says image source and then it will save your file name.

Now there is no way that it’s going to know which file to use because that file name is not located on my website server. So what you want to do is go to website hosting or an image hosting website like TinyPic.com, PhotoBucket.com and stuff like that and you want to upload that image. So I'm going to upload the Follow TSGB image to TinyPic.com, uploading please wait so we’ll give it a second here and then you just want to copy the direct link for layouts.

Then you want to replace the file name and in this case it is Follow TSGB.jpeg. You want to replace that file name with the direct link to the file that you just uploaded and once you have done that everything should work fine. So I'm going to press save draft and I'm going to preview it. So once it loads up let’s give it a test, Follow TSGB@TechSupportGoneBad.com, you can click it and it should go to TechSupportGoneBad.com and just like that it went to TechSupportGoneBad.com. We’re going back to the image MySpace.com/TSGB. You click on it and just like that MySpace.com/TSGB.

Now for the last two I've just notice that I forgot to set the target to blank so you see if you select MySpace.com/TSGB you see that the frame target is not set to blank so that is why it opened up in the same page. So let’s go back and let’s select the last one. Twitter.com/TSGB and again it opens up in the same page because I forgot to set the target to blank and there you go Twitter.com/TSGB.

So that is how to make an image map. It is very simple using this program and another thing that I really like about this program is that if you ever have any trouble using the program or just don’t get how to use a certain aspect of the program just click on this help section right here. Just click on the help link and it will open up a new tab in your web browser Mozilla Firefox or whatever. It will have all of the questions that you could possibly think of for the program and just click on the question you want. Let’s choose the first one and there you go, it has the question answered right there.

And that is a really cool thing about the program because it could help you out just like that right away. So that is how to image map an image. It was one of my most commonly asked questions so I've decided I should make this tutorial on it soon. I hope this tutorial helped you out and if it did please take a look at my website, TechSupportGoneBad.com and please subscribe to my YouTube channel at YouTube.com/TechSupportGoneBad. Until the next tutorial, I’ll see you guys later.

Transcription by: Scribe4you Transcription Services

How To Image Map

How To Image Map -

How To Image Map -