The four images in the actual <img> tags are your original 4 images.
In the hovers
array, there are 4 sub-arrays.
Each sub-array corresponds to the 4 images that you want to use as replacements when one of the original images is hovered over.
So, for example, when the user hovers over "nov1.jpg" (the first actual <img> tag), the replacements for *ALL FOUR* of them images come out of the FIRST sub-array:
When the user hovers over "nov4.jpg" (the 4th actual <img>) the replacement come out of the 4th sub-array:
So, in total, you should have 20 images. IT DOES NOT MATTER where the images come from.
It would be perfectly okay to have, for example
<img src="http://www.picasa.com/77181bb181.jpg" alt="0" title="http://www.picasa.com/77181bb181" />
and yet have the sub-array images coming from a completely different site (or even sites):
["http://www.mysite.com/image/x.jpg", "y.jpg", "z.jpg", "http://www.codingforums.com/pictures/337.jpg" ],
Note only that if the image comes from the SAME SITE as the web page then you do NOT have to specify the full URL to the image (though it is perfectly okay to do so).
If you don't have 20 images--if some of them are repeated for various reasons--that's fine. But you still need the 20 images "slots" as shown in the code.
p.s.: As you noticed that, indeed, my sub arrays just used
The *BROWSER* automatically interprets those as the URLs
<img src="http://www.artsofsnohomish.org/nov12/nov18.jpg" .../>
simply because the page you are looking at has a base URL of
so the images are *relative* to that base URL.