All right.
Let's get into an example, because examples speak louder than a thousand words.
Here we go.
Let's start an HTML file. Within here,
let's have a head style section, but I'm not going to style anything for now.
First, let's just look at this input of type image.
How can we do it?
Well, firstly, let's just ask for a username and we'll have an input of type ...
you guessed it, text.
Its name can be user.
Oh, we don't need an ID.
So there we go.
That's our first input.
We save that.
We look at the browser.
There we go.
And let's move on to the next widget.
I mean usually, you know, with a login page you're going to need a password as well.
We've looked at all these types, which is really, really cool.
Password.
There we go.
It's name can be password.
We don't need an ID.
There we go.
We've got two widgets already, and now yes, we could go button of type submit
okay,
and submit.
We could do this. But say it's important to us that we want an image.
In that instance
would even argue it's not even that useful because within the button you can include an image,
okay. So let's get rid of the button.
Let's just say it's important for you to send the X and Y coordinates.
Well, it's very easy to do that natively by using this input type, right, of type image.
The src is the source of my file. And I've got in the same directory a file called "submit button 1.png".
It takes an alt attribute just in case it can't be displayed to the screen.
Then at least, you know, they'll see the text or the screen reader will be able to read it.
Submit form.
We can define the width.
A width,
let's just make that 100 pixels, and the height,
why don't we do that as 90.
Let's save it.
And there is our cool form.
So now, instead of a boring old submit button, we've got an image.
But ... when I ... let's just say I'm close to the top left corner of this image, if I click that,
look what's sent.
How awesome.
X and Y coordinates,
here 3 pixels to the right, and 3 pixels down, because I wasn't quite in the corner, but
I was almost almost in the corner.
And here, it's just submitted the attributes as X and Y.
Remember I said if you include a name attribute, that will be appended to that name.
So for example, let's have a name attribute on here, of "pos".
Let's refresh the page.
Let's click on the middle now of the button.
There we go.
Now we've got X and Y coordinates with the word "pos" appended to it.
How awesome is that, my dear
students? You might be thinking, "Clyde.
Well, okay, cool.
But, you know, I could have just put that image in the button like you said", and you are 100% right.
So often, you know, you want to use these things when you start creating a heat map.
So let me just give you a quick example while I'm here.
I know I'm naughty.
I'm giving you too many examples, but it's so, so interesting and it's so good for you.
So, choose your favorite food.
Okay, Let's have that as a heading. And under this heading,
okay, let's have a div.
We wrap everything within a div.
It's just good for styling purposes, even though I'm not really going to style it now let's just have
it here.
I want an input type image.
You know the drill.
And here I've got, in the same directory, an image called "food icons.png".
Okay.
Whoa.
That is too, too big.
Let's do alternative text, image of food types.
And let's give our name again of "pos".
And anyway, this image is too big.
So in our styles here, let's target the ID ... we haven't given our input an ID have we, so let's just give
it an ID of image.
How's that?
So now we can target the input with ID of image and we can style it the way we want.
Let's just give it a width of 300
pixels and a height of 300 pixels.
That's better.
Much, much better.
Okay, so now we can go to our browser.
Okay.
What we can do, is you'll notice when we click on the hamburger, we're getting X and Y coordinates of,
say here, 49 and 49.
If we click on the sandwich, we're getting coordinates of 257, 255.
If we click in the middle, it's 147, 147.
So what's really cool in this example is you could write server side code that works out what food was
clicked on by the coordinates submitted, and that can keep a tally of the favorite foods people voted
for.
Right.
So you show them an image, they click on the image, whichever one they love the most, you know,
you've sent those coordinates and you can work out which food they like.
And I know that has flaws.
You know, if they click on the border of one and not quite the other, but that's why you want a lot
of space between the foods and you know, you hope they click on the actual food icon itself.
Anyway, this is just a very fun example, very high level example as to why this might be useful in
your circumstance.
But enough said on the image input type, we've got a ton more to cover.
See you in the next lecture.