Hello. Welcome back. In this video, you'll learn how to create a clickable image map using HTML and particularly what we create in three hotspots. The first one will go to the always shoe website. If I click on that circle.
The second one will go to the new website, University of Oklahoma. If I press anywhere in this a polygon.
In family. The third leg pressing one within this rectangle will go to the end issue websites and they click there.
OK, now that we know what we want to do. Let's get started here. So the first thing you want to do is open up
The editor and I would recommend Notepad or Word Pad some really basic editor.
If you use Microsoft Word, it's probably not going to work. It's going to let insert special characters in there. And also it's got smart quotes, etc. And then it will not work.
With the regular HTML file here. So take a look here. The first step I wanted to do is we're going to get, image maps and will type in syntax.
Someone come in here to my notepad and you should find that under Windows accessories there notepad. I'm gonna come along and we'll call this image maps or a mishmash and they're going to put a little two year so you can clearly see that this is the file and working on
Click
One of the areas below to visit.
Oh you or
Unless you website. Okay, this one I'm going to go ahead and save it and we'll be doing this back and forth will be at making a few changes, take a look at it in a browser.
In continuing so I'm gonna come up here to file. We go to USC bass and I'm going to come on down here and say hello type in here.
Already got one. They're called image maps. I'm just going to put a little to here.
Okay. So three things here. We want to make sure I have specified the folder, only seven of the protocol a tab.
I'm going to go ahead and make sure I'm going to give it a name, and I'm going to make sure it ends with HTML.
HyperText Markup Language and it's a text documents. So give it a name. Make sure there's a period HTML. And then finally, make sure it's a text document you got all three things done. Go ahead and press Save.
So at this point I can go ahead and view it this way just regular English math. I'm gonna take a look at the pod is created. We go to File, Open and here it is image map to dot HTML.
And
Let me just show you another way. Another way you can simply take a look at it is simply right click on it.
And you could go open with Firefox, Chrome Internet Explorer Microsoft Edge, etc. They're almost going to go ahead and open the copy and chrome because Chrome, the coordinates are handled, just a little bit differently.
Okay. So at this point I'm gonna put a paragraph. Right.
And we're now going to go ahead and the very first step I need to do is insert the image once just to get the coordinates. And to do that, how many hours a day for anchor hypertext girlfriend sequel. It doesn't even matter when type ABC in here.
And the number close my anchor. I just needed sandwich. This image between some type of using some type of anchor tag here at this point, I'm gonna go ahead and type image.
Source equals
And I'm going to go ahead and find the URL here. The second type is map that's this map is ma P and I'll go ahead and close that. Okay. So at this point we now need to
Get the coordinates for that image in currently it's under assignment for this will most likely change. But if I press here. It's not a sign of progress on map of Oklahoma. I can come right up here to the URL hit Control see to copy it.
Which point I can come back position my cursor in here and hit paste and some of you may be wondering, why did I just put in like Oklahoma and I kept
Why did I want to use that complete URL. And once you're going to find this on a lot of content management systems when you upload images.
They are placed in a certain folder and lot of times, even the file name is change. So here's a rebrand if I right click on this image.
This image was called just was just called walnut tree. Then when I uploaded it added the crop original
But then it also had a look at this path uploads 307 etc there. So what wasn't a simple little path became a very long path here. And for that reason, I'm going to go ahead and give you
Again by just simply pressing on that is something that the Oklahoma coming up here and grab the URL, you now have got the complete have to the image there, and I tell you what, let's go ahead and save this on the come up here to File, Save. Oh, come to my browser.
Right here, and I'll hit refresh can take a look here. Here's how Firefox works when I run my mouse take look down here at the bottom side. If I moved down there.
Look down here, when I'm writing my cursor over the top, you can see the coordinates. Okay. Chrome is just a little bit different. We
Go to Chrome. I'm gonna hit to refresh. So read those coordinates appear down the bottom with Chrome. When I press actually got a click on image and then it's going to tell me the URL. And I tell you what, long right here. Let me write that down. I'm gonna go with 345
OK, now I'm going to hit the back button will start with an issue. And I'm going to come over here. So with a rectangle and get the top left in the bottom right.
And yes, the flowers and found, I don't care are interested in these coordinates and we're going to go with them 375 and I'll go with a 100
OK, so now we put a paragraph right now. What actually start working on the real image map this first set of code here was just, we're just going to use that to get the coordinates.
Now we can actually start a real image map. Now I'm gonna go ahead and save a little time here. I'm going to take this line, and I'm gonna taste it and what I'm gonna do is
I'm reading put his map. It's going to be used map that's not us. That's us mapped equals, and now I'm going to give it a name because I got to put the pound sign here protocol it. Okay.
Now this I believe is that case sensitive, so you can call whatever you want. Just as long as you're consistent, they're both in the
Making sure you also match on case. Okay, now I'm going to come down below, and I'm going to type a map name equals this one does not have the pound sign. Okay. Yes, ma'am.
You know, close. We'll go ahead and close by Matt tag. Before I forget, okay, here's what we're going to be working with creating the real image.
Once we've got this thing work and we're actually going to either delete this code will comment this codel. Okay, so the first one was a rectangle. So I'm gonna go area.
Shape maybe get a little higher in the screen. Well, that's fine. Equals rectangle and then it's going to take the coordinates are going to be equal to the
Top left, which I have a 345
And then the bottom right, which I've got 375
Here going around that to 100
Okay, if you want, you can actually provide is on their own lines here now and put a trophy was
Number, put the complete path name this one actually would go to a secure. That's what the Lord is stands for
And even if you take a look at my website. I've got that secure with yes
This is going to go to an issue. Okay. That edu. And then just use a good idea to put all attack and I'll put an issue in will close that
Okay. So if I've got everything working right here. I don't have any mistakes.
When I press on an issue that rectangle, you should go to the industry website here. Let me just kind of look here, I've got image source. I've got to use map.
How in Oklahoma. It's going to come here. I've got an area ship rectangle coordinates make shots. The plural with yes
And then each row here. Okay, I'm gonna go ahead and try this. I'm gonna come up here to the file. I'm going to save
I'm now going to come back to my browser home and hit refresh and get rerouted twice. This first one is getting us the coordinates.
To now this bottom one. Take a look. If I am anywhere within this rectangle. You can look down below and says,
Look down here, you're going to see that when they click on that. It's going to go to the issue the website. And sure enough, it is
Okay, now we need to get some more coordinates for our issue and maybe since I've showed you how to use Google Chrome. I'm just going to go ahead and write them out myself here.
using Firefox. I take a look down at the bottom looks like it says 243 55 I'm gonna go with the 245 55. This is going to be with us on the come over here. I'm not going to start a another area tag.
This one I'm going through all the three types of hotspots that you can specify a rectangle. This one is going to be a circle.
And the coordinates are going to be equal to 245 55 so we specify the center and then also specify the radius and about 25 I think was adequate for the radius and they're going to go ahead and specify the complete URL.
HTTPS on
Okay state is there, you're out at edu. And I'm gonna go with all people's wishes you
Okay, let me see if I can move this up here just a little that make a little bit easier here. So I think I've got everything every shape circle.
I've got the coordinates to 4555 that's for the center is then the radius 25 and then where does it go to WW. Okay. Stay that edu. And then the second good yes take, let's check it out. File, Save. I'm gonna come along. I'm gonna hit refresh and say, look,
Here's an issue. Okay and here's the Oklahoma State. So if I run my mouse within here I press. It's going to go to the Oklahoma State University website.
Okay, so we're looking great with that in the shoe got no issue. Now we need to do. Oh, you know, I need to get a bunch of coordinates you
Need to come up here to get the coordinates. This is my actual work in image math. The second one, the top one is where I'm getting the coordinates. And again, if I was to come back over here in Chrome. I wouldn't have to click up here to get the coordinates.
Since I'm in Firefox. Whoops. Let me come right back here, I can just simply am good. Make sure I'm on the right one position my cursor. Let me read this numbers down. I'm gonna go with a
290
Now go with
259 game.
And I'll come down here.
To 5121 25
Now go to 25
And then one more coordinate right up here. I'll go with 201 25
OK, so now I'm going to come back into my code. I'm gonna go area.
Shape deep was let's use a poly people know why.
Now for the coordinates.
Attack all these values here is that those guys are writing down. I'm gonna start up to the top left, and I've got 290
The moving across. So take a look. One more time. I'm going to start here and work my way around plugging in those coordinates 290 259
To 501 25 22515 201 to five and it's optional. We can actually stop there, where we can specify the starting corner. But let me just go ahead and stop there. I'm gonna check my corners here I get 292 509 to 501 25
25 220 515 200 looking great here when 25
Each relief, it was your URL of the University of Oklahoma, which is HTTP also
Www dot o u.edu and I'll put an alt tag.
Oh, you
can close it. Okay, let me check one more time. I think I got the coordinates all cracked a bad area shape Holly.
About my coordinates, a trap www.edu and I think it's looking good here. The second that check this out the File, Save.
Come back here. I'm going to hit the refresh cycle come up here and hit refresh. I can also sometimes I'll hit like control fog to force a refresh.
And sure enough, it looks like it's working. So if I got my cursor anywhere within this a polygon and oppress on it, it's going to go to University of Oklahoma has website there.
One last step is some now we get our work in image map. And it's like, I don't want this talk, went to appear.
So what you could do is simply deleted but I like to do is commented out. So now you get to learn some HTML tags to comment.
Something out and that's going to be simply angle bracket Tasha angle bracket next mission point dash dash dash dash angle bracket so that browser is going to ignore this information.
But I'm going to leave it in there, especially if I was working with a map of the United States is like maybe going to get a few states and then
What if I want to get a few more satisfied just momentarily commented out grab some more coordinates to sound have to kind of repeat that process. Okay, let me say this, the one more time.
I now have this top image commented out here when I hit refresh. I can see, I've only got one. This one's going to issue an issue in know you well hopefully this video. You don't have to create a clickable image map use an HTML and our kitchen next video. Thank you.