Welcome back, my dear students. Here,
we're going to talk about another input type, this time of image.
What is this all about?
Well, firstly, the image button control is rendered exactly like an image element, except that when
the user clicks on it, it behaves more like a submit button.
So in other words, it's like a graphical submit button.
That's effectively all it is.
And the cool thing is, is that this element supports exactly the same set of attributes as an image
element plus all of the other attributes supported by other form buttons.
So for example, we could write out an input of type image like this.
And I'm sure you've already noticed that a lot of these attributes you will be used to when using the
image element itself. And we can use them here.
Pretty intuitive, right?
But now you might be thinking, "wow, firstly I don't see a value attribute.
And what happens then when I submit the form?
Specifically when I submit the form using this input type of image."
Well, I want to start off the bat by saying the control does NOT submit a value.
What?
I know strange, right?
That value attribute should not be used with this input type and it's one of the very few elements that
does not have a value attribute.
"So then, Clyde, what does it submit?"
Good question.
The mouse coordinates are sent with the request.
Okay.
So the coordinates are sent with the request.
"What do you mean by coordinates?"
Well, all I mean is that the x and Y coordinates of the click on the image are submitted.
So this means two values are sent with each request, the X coordinates and the Y coordinates.
These coordinates are relative to the actual image.
And this just means that the upper left corner of the image represents the coordinates
0 0.
So if you are one pixel to the right, it's going to submit as 1 0.
If you are one to the right and one down, it's going to submit 1 and 1.
Pretty intuitive.
The other thing I want to mention here is that if the image input has a name attribute, then the specified
name is prefixed on every attribute.
So if the name is "pos", for position, for example, then the returned coordinates would be formatted
in the URL as pos.x and pos.y.
It'll kind of look similar to this.
But of course, if we use the name attribute of "pos", it will apply to all other attributes as well
on that element.
Is it making sense?
I hope so.
Let me just give you a quick example.
If a user clicks on the image at coordinates (84,450), what will be sent as part of the request?
Well, that's right.
pos.x
is going to be 80 and
pos.y is going to be 450.
Pretty straightforward.
And you might be thinking, man, when would I ever want to do this?
Well, for example, what if you want a heatmap, right,
you want to send coordinates to a server where the user's clicked.
What about if it's a location on a map,
for example, the server side code can work out what location was clicked on and return information
about places nearby, for example.
But there are other examples as well.
In fact, why don't I code up a few now with you. And I really do encourage you to code along with me.
You know, obviously "DOING" is much, much better than just "LISTENING".
But anyway, I wanted to just thank you for all of your support.
I really love you â™¥ guys so much.
I couldn't do this without you.
Hope you're having a lot of fun in this course, and I'll see you in the next lecture when we code up
some cool examples of using this input of type image.
Can't wait.
See you now.