Welcome to Exploring Computing.
Today's video is creating web pages, advanced image
techniques.
So in this video, we're going to take a look at some fancier
things that you can do with images.
I wanted to start off by talking about image maps.
The basic idea behind an image map
is, suppose I want to link different parts of an image
to different web pages.
And it's kind of apropos that Maddie's
going at it right now because she's our first example.
So here's Maddie facing off with the Roomba.
And let's say we want to link this image to a web page.
Well, that's easy enough.
We already know how to do that.
We just go ahead and have the image tag.
We go ahead and surround it with an a href=,
and then wherever we want the user to go when they click
on the image, they're going to go to that location.
But you know suppose we're not quite
sure do we want to go to the web page Maddi.html.
If somebody clicks on Maddie versus the rumba's photo.
Or do we want to go to theroomba.html web page.
It'd be nice if we could actually
go to different web pages depending on where
the user clicked on the image.
So if the user clicks on Maddie's part of the image,
we go to Maddies.html and if we click
on the Roomba part of the image we go to roomba.html.
And it turns out that this technique is actually
useful in a lot of places.
So for example, here's a aerial photograph of Stanford
I got from the Stanford archives.
And you can see we might want it to have different parts
of campus highlighted.
And if people clicked on the different parts of campus,
we would go to different locations
based on the specific part of the photograph they clicked on.
Or let's say you were part of an organization
and you had a photograph where there
were a bunch of the members of your organization
all in the photograph.
And I use this particular image because I wanted an image
with a lot of people in it that I
knew wasn't going to have a copyright issue.
So this is a US government photograph.
All right, so we've got different people in this image.
We have a bunch of people everybody knows.
We have in the back we have our counterterrorism expert.
We have, I should have looked this up beforehand.
I believe that's James Clapper in the upper right.
Believe he was Director of National Intelligence.
So there's a bunch of different people on this photograph.
And if we click on the different people in this photograph,
we want to go to the different web pages
based on where we click on the photograph.
And so that's the whole idea behind the image maps
and they're actually pretty straightforward.
They are somewhat specialized.
These situations don't come up all the time
but they definitely do come up.
So this is a handy tool to have in your toolbox.
So we're going to have a simple example to start off with.
And so we have an image of a computer here.
And there's different parts to this computer.
So suppose we're selling these computers
and we want people to be able to go to different locations.
Different web pages to learn about the different components
of the computer.
If they click on the speakers we're
going to take them to a web page where we talk about speakers.
If we click on the monitor, we're
going to take them to a different web page specifically
about the monitor and so on.
And I'm talking about moving the web page from one location,
you can actually also do some other things.
You could trigger some JavaScript
based on where the user was moving their mouse as well.
So this isn't strictly limited to just creating links.
All right, so what we need to do here
is we need to take several steps.
We need to define a map.
And so this is a map for our computer image.
And there's a couple of things to note.
So we have a map start tag map and a map end tag
and we've given a name to the map.
The map start tag has a name attribute value pair.
And so that's going to be important.
Ultimately we're going to need to know
what that name is in order to link
this map to the specific image.
And then we have a whole bunch of different areas here.
And each of these areas has a shape.
In this particular case, they're all just
shape equals rectangle.
And then we have a set of coordinates.
And then we have a href equals.
And so that is where we're going to take the user.
The next web page we're going to take the user if they click
inside this particular area.
And then you're supposed to also have an alt.
So let's take a close look at this first area here.
Shape, rectangle, coordinates 50, 20, 215, 157.
What are those.
So this is to take the user to information
about the computer display or the computer monitor.
Display and monitor are more or less anonymous.
And so the 50 20 is actually the coordinates
of the top left hand corner of the monitor.
215 157 is actually the bottom right hand coordinates
of the rectangle.
Where if the user clicks within that rectangle we want them
to go to components/monitor.html.
And as to where you're going to get these coordinates,
most image processing programs are going to be able to get you
these coordinates.
You may need to look up online to find out exactly
where these coordinate show up.
Now I'm on Windows, so Windows comes with a free program
called Paint.
Paint definitely has these coordinates available to you.
Certainly if you want to use something fancy
like Adobe Photoshop that's going to have
these coordinates for you.
So you're just going to have to load up
your image into one of these image processing
pieces of software.
And then actually just move the mouse around
get the coordinates of the individual rectangles you
want to work with.
OK, so we've got all the different parts
of our map defined.
All the different rectangles, which we want to have
take the users to different locations.
We're going to go ahead and get that set up.
All right, the next step is to actually associate the image
map with the actual image.
And so here I've got the IMG tag that I'm using to actually put
this image on the web page.
And then I've got the map that we just looked at a minute ago.
And so the key points here are the IMG tag now has this use
map attribute value pair.
And the use map at your value pair
should have as its value a number sign
followed by the name of the map.
We mentioned the name of the map a minute ago.
Well here's how you connect the two together.
So I think this technique is pretty straightforward.
You need to know it exists.
So now you know it exists.
And then when you have that sort of situations
where this is going to be useful,
it's not too bad to work with.
Now I've been showing you just rectangles,
but this actually works for non rectangular areas as well.
So here I've got a part of the Cantor Center
for Visual Arts, which is Stanford's art museum.
And you can see we've got that octagon in the top left, which
is actually where the thinker is.
And so it's possible to define polygonal areas as well
as rectangular areas.
And then we've got that little semicircle down
on the bottom right.
You can go ahead and define that as a circular area.
OK, so here's another technique which can actually
be extremely useful if you have a web page with a lot of really
small images.
And so this is called CSS Sprites or CSS Image Sprites.
And the basic idea here is if you
have a lot of images on your web page,
it's going to take a long time to download.
Remember, each of those images needs
to be downloaded individually.
The web browser can download several different files
simultaneously from a web server.
But at some point, it's going to max out
and so you can't download 15 images simultaneously
from a web server.
That's not going to happen.
It's going to start downloading them sequentially.
And that's really going to slow down your web page appearance.
So there are several different techniques
that you can use to get around this.
The first one is CSS Sprites.
And then I'll show you another technique
in a couple of minutes.
OK, so I've got two different web pages here.
The web page on the left is the Sprites version of the page.
And the version on the right is the no Sprites version
of the page.
Otherwise they look pretty much the same.
If you look really carefully I didn't
do a great job getting the alignment exactly right
on these items.
But it's certainly possible to get
all the items properly aligned on both versions of the page.
OK, now here's the thing that's a little bit fancy.
So it turns out the left version of the page
only has one image for the entire web page,
whereas the right version of the web page
has four images for the web page.
How can this be.
Well let's start with the no Sprites
version of the web page.
This is the version that you guys can all
create at this point.
And so in the body, I've got a bunch of IMG tags.
I've got four different IMG tags and I've
got four different images on the server.
So I've got the caution, the no, the signal, and the stop.
And those are all independent image files.
And they all get loaded by these four different IMG tags.
Here's what the Sprites version of the HTML looks like.
You can see that we've got four different divs,
but I don't actually have any images at all in the HTML.
What's going on here.
So as the name CSS Sprites suggests,
I'm actually going to work on the images
from the CSS part of the HTML file.
So instead of putting the information in the body,
I'm going to go ahead and put it in the stylesheet.
Either an internal stylesheet or an external stylesheet.
And so what I've got here is this
is what the web page would look like if I turned
a border on for this for divs.
If you're actually doing this for CSS Sprites,
you're not actually going to put a border around it.
But I just sort of want to give you
an idea of what's going on here.
That's the space.
Those borders that are there.
That's the space that I'm setting aside
for these four divs.
And I'm going to go ahead and do that
by giving them a height and a width in the stylesheet.
And then I'm going to have a single image that I'm going
to download for this web page.
And here it is, combined.gif, and you can see that all four
of the symbols that I want to appear on my web page
are all combined onto this single GIF.
Now what I'm going to do is in the stylesheet,
I'm going to go ahead and write style rules for each
of these different divs.
You'll notice I gave each of the divs different IDs.
And so in this first div I go ahead
and give it a height and width.
And then I take advantage of this background image style
property.
And so what the background image style property does
is it says you can take any element on the web page.
And you can stuff a background image behind it.
And in this particular case, I'm going to stuff our combined.gif
as the background image.
And it turns out if that background image doesn't
actually fit within the background
of the particular item, there's a bunch of things
that you can kind of control and play around with.
But the basic setting here is it gets cut off.
So that whole image is behind our div here.
But only the traffic lights are going to show up.
I've left the rest there kind of faded out just
to remind ourselves that that whole combined GIF is
back there.
But only the traffic light is actually
going to appear on the web page.
And then I go ahead and do the same thing for the next div.
So for Sprite two, that's the ID for our second div,
I go ahead and do the same thing.
But in addition to using the background image style
property, I use a second style property
associated with background images, which
is the background position.
I shift that background image over
slightly so that the traffic light is no longer showing
directly behind this div.
Instead the stop sign is showing behind it.
And again, everything's going to get cut off
except for what's actually behind the div.
So I'm showing that full GIF there
with the traffic light and the stop
and the cancel and the caution.
But really, the only thing that's
actually going to appear on the web page
is the part that's directly behind this div which
is a stop sign.
And then of course I just do the same thing
for the other four images.
And ultimately, what appears on the web page
is exactly the same thing that appeared on the web page
when I had four different IMG tags.
So again, you probably won't see a huge savings
if you have just a few images.
I believe the web browsers will now download up to five files
simultaneously.
I could be wrong on that.
But it used to actually be only two files simultaneously
and they've slowly increased the amount.
But the more things that you're trying
to download from the server, the slower your web page
is going to appear.
And so this is an example of a real world Sprite.
This is an old Sprite page for, as you can tell, amazon.com.
And if you were to count up each of these little parts
of the image, there's probably over 60 images here.
And so if Amazon needed to download these
all individually, that would take a really long time
and that would really kind of bog their connection down.
It would slow down the appearance of the web
page for their customers.
And they don't want that to happen.
So instead they download a single image file
and then they use this CSS Sprites technique to actually
put the parts of the Sprite file onto the web page.
OK, so previously we've seen that we
can take an image with no Sprites
and have four images on the web page.
And we can take an image with Sprites
and have one image on the web page.
I am now going to reduce the number
of image files associated with the web page to zero.
I'm going to simplify it and just work with a single image.
Mostly because this is going to turn out to take up
a lot of space on the screen.
But you can extrapolate from what
I'm going to show you and actually
replace all four of these images on our Sprites
and no Sprites version of the web page
with this new technique and get completely rid of any image
files.
OK so this is called Base 64.
And the idea here is bits are bits,
as we talked about the very first week of this class.
And so it turns out that you can stick bits into your HTML file.
The HTML file is going to expect to look like text.
That's OK.
We can go ahead and convert an image file to a bunch of bits.
And then we can ask the computer,
if these bits were being represented as text,
what would this appear as.
What would these ASCII characters look like.
And so that's exactly what this technique does.
So the simplified version of the web page, with just a signal,
is actually going to take 0 image files.
And here's what it looks like.
Now we've got our IMG.
And then at the very, very bottom,
you can see I close out the IMG tag with the all equal signal.
And then I've got this big old source thing.
What the heck is that.
And so that is the actual bits that compose the signal.
And so I've gone ahead and taken those bits and said,
hey, if I were to represent those bits as text,
what would they look like.
And I've gone ahead and converted
those bits, treated them as text,
stuck that into my text editor for my HTML file.
But when the web browser gets to it, it's going to look at this
and say, oh, I see that this is marked
as SRC equals data image.
GIF Base 64.
And I'm going to re convert this big long text string
and actually treat it as a bunch of bits.
Which ultimately I'm going to treat as an image.
This technique can definitely increase the speed at which
your web pages will download.
It is a bit more work.
It's a little unwieldy to work with.
But it's definitely out there and something
that's generally supported now.
So you may be wondering, if I want to use this technique,
how do I convert my image to those text strings.
Basically, there's a whole bunch of websites
out that will do it for you.
Just Google Base 64 imaging coder.
You can find different websites that will take your image,
convert them to strings.
And then you can just take those strings
and stick them into your HTML files.
OK that's it for now.
I'll talk to you all soon.