1
00:00:00,360 --> 00:00:04,910
With our style she created we can now build the elements in our body tags.

2
00:00:04,920 --> 00:00:08,460
Start with creating a container that will hold all our objects

3
00:00:11,100 --> 00:00:12,320
we'll give it a center alignment

4
00:00:20,200 --> 00:00:27,980
next we'll create a heading for the page using undertakes and then just add a break after the header.

5
00:00:27,980 --> 00:00:30,700
Now we'll create a dish that will contain the main preview image

6
00:00:34,240 --> 00:00:42,270
the class we've applied to this day is preview so that is going to be styled using our preview style

7
00:00:42,270 --> 00:00:50,970
definition of pure we've given it a center alignment it's important to note that we've also inserted

8
00:00:51,750 --> 00:00:58,020
the default image that will be displayed when the page loads and we've given this image and name preview

9
00:00:59,320 --> 00:01:03,020
and we've set this sauce to image 1 in our images folder.

10
00:01:03,220 --> 00:01:07,120
So keep that in mind that it's important to note that we've named it preview because we'll be using

11
00:01:07,120 --> 00:01:08,500
this in just a moment.

12
00:01:08,500 --> 00:01:12,610
The next thing I'm going to insert here is the code block or the thumbnails

13
00:01:19,880 --> 00:01:25,250
so the thumbnails will be contained and indeed in the class we've applied to the date is the thumbnails

14
00:01:25,250 --> 00:01:34,260
class so the styling will come from these two definitions here.

15
00:01:34,420 --> 00:01:44,300
You can see that we've inserted five images inside this div and each one has a javascript on mouse over

16
00:01:44,300 --> 00:01:52,010
event when we hover our mouse over thumbnail one for example the preview image is changed to a different

17
00:01:52,010 --> 00:01:53,300
source.

18
00:01:53,300 --> 00:01:56,220
So here's the the image preview.

19
00:01:56,510 --> 00:02:04,040
Its source is changed to image one for the first image image two for the second image three image for

20
00:02:04,040 --> 00:02:04,790
an image five.

21
00:02:06,050 --> 00:02:10,050
So that's what gives us the on mouse over effect.

22
00:02:12,550 --> 00:02:18,400
The image that's displayed will correspond to its matching thumbnail and of course we've set the source

23
00:02:18,400 --> 00:02:23,540
of the thumbnail for each image and that's it.

24
00:02:23,540 --> 00:02:24,770
That's the entire script.

25
00:02:24,770 --> 00:02:29,780
So when you've completed that just go ahead and save the file and previewed in your web browser to see

26
00:02:29,780 --> 00:02:30,490
the end result.