With our style she created we can now build the elements in our body tags.
Start with creating a container that will hold all our objects
we'll give it a center alignment
next we'll create a heading for the page using undertakes and then just add a break after the header.
Now we'll create a dish that will contain the main preview image
the class we've applied to this day is preview so that is going to be styled using our preview style
definition of pure we've given it a center alignment it's important to note that we've also inserted
the default image that will be displayed when the page loads and we've given this image and name preview
and we've set this sauce to image 1 in our images folder.
So keep that in mind that it's important to note that we've named it preview because we'll be using
this in just a moment.
The next thing I'm going to insert here is the code block or the thumbnails
so the thumbnails will be contained and indeed in the class we've applied to the date is the thumbnails
class so the styling will come from these two definitions here.
You can see that we've inserted five images inside this div and each one has a javascript on mouse over
event when we hover our mouse over thumbnail one for example the preview image is changed to a different
source.
So here's the the image preview.
Its source is changed to image one for the first image image two for the second image three image for
an image five.
So that's what gives us the on mouse over effect.
The image that's displayed will correspond to its matching thumbnail and of course we've set the source
of the thumbnail for each image and that's it.
That's the entire script.
So when you've completed that just go ahead and save the file and previewed in your web browser to see
the end result.