Bill Rosener: This is Dr. Bill. Welcome back in this video you learn how to create an image map using HTML, and in particular, we're going to create 3 Hotspots. One's going to be a rectangle. If I press on there, it's going to take me to the end issue website
Bill Rosener: and then go ahead and create a circle. If I press on there, it's going to go to Osu. And then, finally.
Bill Rosener: if I press on this polygon, it's going to go to the University of Oklahoma's website there.
Bill Rosener: Okay, now that we know what we're to do, let's get started.
Bill Rosener: So 1st thing I'm doing is open up an editor. I've got visual studio code already. Got my folder specified. I'm just going to come right up here to file new.
Bill Rosener: I'm going to type in assignment.
Bill Rosener: 5 dot HTML, and create
Bill Rosener: and credit file.
Bill Rosener: Okay, at the very top was a little text, here, image map along with some sentence. Here, let's go ahead. And I get that in there.
Bill Rosener: So h, 1
Bill Rosener: image map.
Bill Rosener: And I'm gonna type in click.
Bill Rosener: is it the Osu
Bill Rosener: OU or Nsu, website
Bill Rosener: okay? And, too, I'm gonna put a paragraph break here. Just
Bill Rosener: I can actually put a couple line breaks too
Bill Rosener: little VR for a line break. So I've got image map, little text. Here.
Bill Rosener: let's go ahead and say this, someone come right up here to phone.
Bill Rosener: save.
Bill Rosener: Come over to my oops.
Bill Rosener: Then right click open in default, browser.
Bill Rosener: And here we go, just a little tax, and that's looking great so far.
Bill Rosener: Okay, now, coming back next step, we're gonna do is, insert that image.
Bill Rosener: Okay? And this is going to be is map. Now I need to grab the URL.
Bill Rosener: And if I take a look, here is the assignment. 5
Bill Rosener: description. Like, I'm right here. Map of Oklahoma.
Bill Rosener: I can grab
Bill Rosener: the yeah. URL, copy it. The control C
Bill Rosener: come right back in here and paste. It
Bill Rosener: so got image source equal.
Bill Rosener: The URL is map. Let me go ahead and save this.
Bill Rosener: and we'll come right back here and refresh.
Bill Rosener: Okay, so right now we just got the image. I'm not getting any coordinates, etc, to get some coordinates. What I can do is simply sandwich this
Bill Rosener: a Href equal. It doesn't even matter. You can just type in you. See here, or anything you want.
Bill Rosener: And now I need to close it. Let me put on the next line.
Bill Rosener: Okay? So I've got my image source equal is math. Make sure you get these map there. A for anchor hyper, text reference equal. It doesn't even matter. Close the anchor. I'm not going to come up here to file, save.
Bill Rosener: I'm only going to come right back over here and refresh.
Bill Rosener: and I'm going to start right here with this top corner of Nsu.
Bill Rosener: I'm gonna go ahead and press there. It's like, Okay, great. This can't be found. But if I take a look at the very top, I'm going to write these coordinates down. I've got 300,
Bill Rosener: and I'm going to go with a 45
Bill Rosener: just adds 44 and make it 45.
Bill Rosener: Okay, now, I'm gonna come right over here. Actually, for a rectangle. We need the top left and the bottom right?
Bill Rosener: And I'm gonna go
Bill Rosener: 3, 75, and 100.
Bill Rosener: Okay, and let me go back. Okay? So I now know the top left the bottom right of this one. Let me just go ahead and show you if I was in
Bill Rosener: Firefox.
Bill Rosener: Little bit easier. Here.
Bill Rosener: Okay, take a look down at the bottom. You can see, as I move my cursor.
Bill Rosener: it's telling me the exact location.
Bill Rosener: So this would be much easier in Firefox, because then I could. I don't have to sit there and click and go. Okay, there's 345, etc. there. But if you're in chrome
Bill Rosener: you've got to actually click. Then at the end of the URL is
Bill Rosener: the coordinates.
Bill Rosener: Okay? Well, let's go ahead and start. So this one.
Bill Rosener: all it's gonna do
Bill Rosener: is tell us.
Bill Rosener: Maybe I'll put the line breaks there again
Bill Rosener: my 1st time to teach, and I'd always tell students that the BR. Stands for Bill Rosen there, and I think some of them believe me. So anyway, now it's just just a line break.
Bill Rosener: Okay? So now, what we want to do is insert the image again.
Bill Rosener: This is gonna be our working model.
Bill Rosener: And let me just go ahead and grab this. I should just grab all that code.
Bill Rosener: Okay. So I've got image source equal.
Bill Rosener: Then I'm gonna go on use map.
Bill Rosener: And then in here I need to put. I'm going to put a pound sign.
Bill Rosener: And I'm going to put, call this Ok. Map
Bill Rosener: and close it. Let me put that on the next line. So it's not going off the edge there.
Bill Rosener: Okay, so image source equal. I've got the URL
Bill Rosener: use map equal pound. Okay, map.
Bill Rosener: Now, we're actually going to specify the map.
Bill Rosener: And this has to match. Okay, even in case
Bill Rosener: all capital letters. So notice in the image, I've got a pound sign down here. I do not.
Bill Rosener: But it's got a match.
Bill Rosener: Okay. Now, I'm gonna simply go. Now, go ahead and type in an area
Bill Rosener: shape
Bill Rosener: equals rectangle
Bill Rosener: coordinates equal again, it's going to be the top left.
Bill Rosener: So I've got 300,
Bill Rosener: the 45,
Bill Rosener: and then the bottom right.
Bill Rosener: 3, 75,
Bill Rosener: and 100.
Bill Rosener: If you want to put this on separate lines, and then we're going to put the Href is the URL. We're going to go to.
Bill Rosener: Yeah. And if you want is, someone is visually impaired. We're gonna go ahead and
Bill Rosener: put an Alt tag there.
Bill Rosener: So again, if you wanted to, you could actually break this all up
Bill Rosener: put in all this on separate lines if you wanted to. But I'm just gonna go ahead and leave this all on one line.
Bill Rosener: Okay? So now that area shaped because of rectangles. Again, there's 3 types of rectangle circle. Polygon. Specify the coordinates. The top, left
Bill Rosener: the bottom right. Where do we go? And then for visually impaired them. Okay, I'm gonna go ahead and save this
Bill Rosener: back to my browser. It Re, I can use the keyboard shortcut. I'll press right here. So again we've got it twice. And here, when we're finished.
Bill Rosener: we're actually going to comment this one out.
Bill Rosener: But I can see. Here's my cursor.
Bill Rosener: Notice. It changes to a finger
Bill Rosener: when I'm inside the rectangle.
Bill Rosener: And so if I press on there.
Bill Rosener: sure enough, it's going to go to the Nsu website.
Bill Rosener: Okay. Now, maybe I'll do this within Firefox.
Bill Rosener: Okay.
Bill Rosener: I'm now going to grab the center of the circle.
Bill Rosener: And that looks like I'm gonna go 2, 4, 2,
Bill Rosener: 57. I was gonna round that out but 2, 4, 2, 57.
Bill Rosener: Okay, so now I'm gonna come along and add another one area
Bill Rosener: shape equals this. One's gonna be a circle
Bill Rosener: here. The coordinates are going to be the center.
Bill Rosener: And that's what I've got. The 2, 4, 2
Bill Rosener: comma.
Bill Rosener: 57
Bill Rosener: oops. And then the 3rd coordinate is the radius, and I'm gonna go with a 25
Bill Rosener: and Alt equals OS U
Bill Rosener: and close our area tag. So good. Now we get to. I've got area shapeless circle.
Bill Rosener: I've specified the 1st 2 coordinates or the center. The 3rd coordinate is the radius.
Bill Rosener: Specify the yeah. URL,
Bill Rosener: okay, state.edu. And you know, okay, let me go ahead and save this.
Bill Rosener: Come back to my browser.
Bill Rosener: and I control F. 5. Looks like it's like, I don't even know. It's like it's kind of ingrained on what I do here. And then I'm gonna press. I can take a look here.
Bill Rosener: And if anybody anywhere in there it's gonna go to the Osu website.
Bill Rosener: Okay?
Bill Rosener: Finally, one last one.
Bill Rosener: And this is the Polygon. So I'm gonna go ahead and again use Firefox.
Bill Rosener: I'm gonna get some.
Bill Rosener: We'll go with 200
Bill Rosener: and 90.
Bill Rosener: I'm gonna go 2, 50
Bill Rosener: and 90,
Bill Rosener: 2, 50
Bill Rosener: and 1, 25
Bill Rosener: and 2, 20
Bill Rosener: and 1 50,
Bill Rosener: and then back up here.
Bill Rosener: Want to go with a 200
Bill Rosener: and 1, 25 again.
Bill Rosener: Okay.
Bill Rosener: And again, if I was in
Bill Rosener: Chrome I would be pressing right here, for example.
Bill Rosener: that'd be grabbing the yeah. URL,
Bill Rosener: alright. Nothing wrong the coordinate position of that location there.
Bill Rosener: Okay, we're ready to come back into
Bill Rosener: our editor
Bill Rosener: area shape peoples
Bill Rosener: Hauler.
Bill Rosener: And now I can go. Just I'm gonna go clockwise around. I'm gonna start up through the top left
Bill Rosener: and 200
Bill Rosener: and 90,
Bill Rosener: 2, 50
Bill Rosener: and 90,
Bill Rosener: 2, 50
Bill Rosener: and 1, 25,
Bill Rosener: 2, 20,
Bill Rosener: and 1 50,
Bill Rosener: and the last one here, 2, 20, or 201 25.
Bill Rosener: I'm just take a look here again. 290,
Bill Rosener: 2 50, 90,
Bill Rosener: 2, 51, 25,
Bill Rosener: 2, 2115
Bill Rosener: and 201, 25, and if I wanted to, this is optional, I can put 200 comma 90, and that's going to actually, in effect, connected. But it's smart enough to know that I've specified. I've gone 1, 2, 3, 4, 5, and it will make this final connection if I leave that off.
Bill Rosener: Okay, yeah. Now, we're gonna put this on the next line.
Bill Rosener: Href equal
Bill Rosener: and close the air attack.
Bill Rosener: So area shade poly.
Bill Rosener: I've got the coordinates.
Bill Rosener: It's rather I'm gonna go to. Ou Edu! I've got an all tag, and we're ready to check this out file, save
Bill Rosener: come back
Bill Rosener: refresh.
Bill Rosener: And sure enough, if I'm
Bill Rosener: within this polygon
Bill Rosener: I press there.
Bill Rosener: it's going to go to University of Oklahoma's website.
Bill Rosener: Okay, one final step here.
Bill Rosener: And that is all I was using this top one for was to get the coordinates
Bill Rosener: so we can go ahead and comment it out and insert a comma and HTML,
Bill Rosener: I can just
Bill Rosener: Okay, I'm going to put angle, bracket, explanation point 2 dashes.
Bill Rosener: 2 dashes and another angle bracket. And so if I say this.
Bill Rosener: and back to my browser and hit refresh. Now I'm back to one image, and this is my working one. And if I press on there, it's going to take me to the Nsu website, for example.
Bill Rosener: Well, hopefully, in this video, you learned how to
Bill Rosener: great image maps
Bill Rosener: in HTML. And in particular, we focused on the 3 different shapes. You got a rectangle circle and a polygon. And I'll catch you next. Video. Thanks a lot. Bye.