WEBVTT

0
00:00.290 --> 00:02.570
Welcome back, my dear students. Here, 

1
00:02.570 --> 00:07.580
we're going to talk about another input type, this time of image.

2
00:07.580 --> 00:09.080
What is this all about?

3
00:09.110 --> 00:15.890
Well, firstly, the image button control is rendered exactly like an image element, except that when

4
00:15.890 --> 00:19.910
the user clicks on it, it behaves more like a submit button.

5
00:19.910 --> 00:24.350
So in other words, it's like a graphical submit button.

6
00:24.350 --> 00:26.690
That's effectively all it is.

7
00:26.780 --> 00:32.780
And the cool thing is, is that this element supports exactly the same set of attributes as an image

8
00:32.780 --> 00:37.700
element plus all of the other attributes supported by other form buttons.

9
00:37.700 --> 00:41.870
So for example, we could write out an input of type image like this.

10
00:42.230 --> 00:47.540
And I'm sure you've already noticed that a lot of these attributes you will be used to when using the

11
00:47.540 --> 00:50.570
image element itself. And we can use them here.

12
00:50.750 --> 00:52.730
Pretty intuitive, right?

13
00:53.330 --> 00:57.560
But now you might be thinking, "wow, firstly I don't see a value attribute.

14
00:57.560 --> 01:00.780
And what happens then when I submit the form?

15
01:01.870 --> 01:05.890
Specifically when I submit the form using this input type of image."

16
01:06.100 --> 01:11.740
Well, I want to start off the bat by saying the control does NOT submit a value.

17
01:12.070 --> 01:13.240
What?

18
01:13.480 --> 01:15.000
I know strange, right?

19
01:15.010 --> 01:21.730
That value attribute should not be used with this input type and it's one of the very few elements that

20
01:21.730 --> 01:24.190
does not have a value attribute.

21
01:24.190 --> 01:26.710
"So then, Clyde, what does it submit?"

22
01:26.740 --> 01:27.700
Good question.

23
01:27.940 --> 01:31.360
The mouse coordinates are sent with the request.

24
01:31.510 --> 01:31.900
Okay.

25
01:31.900 --> 01:34.240
So the coordinates are sent with the request.

26
01:34.390 --> 01:36.400
"What do you mean by coordinates?"

27
01:36.430 --> 01:42.460
Well, all I mean is that the x and Y coordinates of the click on the image are submitted.

28
01:43.350 --> 01:49.500
So this means two values are sent with each request, the X coordinates and the Y coordinates.

29
01:49.530 --> 01:53.460
These coordinates are relative to the actual image.

30
01:53.460 --> 01:58.530
And this just means that the upper left corner of the image represents the coordinates

31
01:58.530 --> 02:00.030
0 0. 

32
02:00.060 --> 02:04.860
So if you are one pixel to the right, it's going to submit as 1 0.

33
02:04.890 --> 02:08.590
If you are one to the right and one down, it's going to submit 1 and 1.

34
02:08.610 --> 02:10.080
Pretty intuitive.

35
02:10.110 --> 02:17.070
The other thing I want to mention here is that if the image input has a name attribute, then the specified

36
02:17.070 --> 02:20.580
name is prefixed on every attribute.

37
02:20.580 --> 02:27.030
So if the name is "pos", for position, for example, then the returned coordinates would be formatted

38
02:27.030 --> 02:30.690
in the URL as pos.x and pos.y.

39
02:30.720 --> 02:33.060
It'll kind of look similar to this.

40
02:35.640 --> 02:40.560
But of course, if we use the name attribute of "pos", it will apply to all other attributes as well

41
02:40.590 --> 02:41.640
on that element.

42
02:41.850 --> 02:42.840
Is it making sense?

43
02:43.210 --> 02:43.800
I hope so.

44
02:44.520 --> 02:45.810
Let me just give you a quick example.

45
02:45.810 --> 02:50.940
If a user clicks on the image at coordinates (84,450), what will be sent as part of the request?

46
02:51.210 --> 02:52.440
Well, that's right.

47
02:52.680 --> 02:53.280
pos.x

48
02:53.280 --> 02:54.660
is going to be 80 and

49
02:54.690 --> 02:56.700
pos.y is going to be 450.

50
02:57.090 --> 02:57.990
Pretty straightforward.

51
02:57.990 --> 03:01.090
And you might be thinking, man, when would I ever want to do this?

52
03:01.110 --> 03:06.620
Well, for example, what if you want a heatmap, right,

53
03:06.630 --> 03:10.950
you want to send coordinates to a server where the user's clicked.

54
03:10.980 --> 03:12.780
What about if it's a location on a map,

55
03:12.780 --> 03:17.400
for example, the server side code can work out what location was clicked on and return information

56
03:17.400 --> 03:19.680
about places nearby, for example.

57
03:19.920 --> 03:21.770
But there are other examples as well.

58
03:21.780 --> 03:27.660
In fact, why don't I code up a few now with you. And I really do encourage you to code along with me.

59
03:27.660 --> 03:32.040
You know, obviously "DOING" is much, much better than just "LISTENING". 

60
03:32.220 --> 03:35.620
But anyway, I wanted to just thank you for all of your support.

61
03:35.620 --> 03:37.150
I really love you ♥ guys so much.

62
03:37.150 --> 03:38.830
I couldn't do this without you.

63
03:38.860 --> 03:44.350
Hope you're having a lot of fun in this course, and I'll see you in the next lecture when we code up

64
03:44.350 --> 03:47.950
some cool examples of using this input of type image.

65
03:47.950 --> 03:48.620
Can't wait.

66
03:48.700 --> 03:49.120
See you now.