Storing the Data: Creating a Two Dimensional Array
Since we are extending our image scroll bar we need a way to store and retrieve more data than just the paths to our images. We also need the image title and description. The best way to accomplish this is with a two dimensional array.
So, what is a two dimensional array? Think of it as a table. Any table you create has rows and columns. If you were to index your table you would reference each cell by its row and column number. Thats exactly what a two dimensional array is.
The array that we are using has 10 rows and 3 columns. The first column holds our image paths, the second column holds our image titles, and the third column holds our image descriptions. Notice the data assignments at the top of the script references row number then column number. I separated the data assignments into 3 sections so it is easier to see how the array works.
Function - changeCellText
This function takes care of updating our title and description data. It finds the cell to update using the same getElementById method that we use throughout our script and sets the innerHTML to the new value. The innerHTML property is what allows you to update content in your table cells.
Function - changeImageAlt
This function changes the alt property for the large image. It combines the image title and description and sets the alt value using setAttribute. Keep in mind you wont actually be able to see this change in your standard browser.
Function - changeImageTitle
This function changes the title property for the large image. It combines the image title and description and sets the title value using setAttribute. In most browsers this will result in a tooltip with your title and description when you hover over the large image.
Function - changeImageOnMouseOver
This function is responsible for keeping our thumbnail onmouseover events straight. It changes a thumbnails onmouseover attribute so that when our handleThumbOnMouseOver function is called the correct row index for our image data array is sent. This function is called from the functions that change the scrollbar thumbnail images.
Function - handleThumbOnMouseOver
This function is the workhorse of our new functionality. It is responsible making the changes to src, alt, title and onmouseover attributes. It uses the row index parameter that is passed to it to find the appropriate data and then calls the changeImage function to change the image, the changeCellText function to change cell text for the title and description, and the functions that handle changing the alt and title attributes.
Updates to Scrollbar Functions
The only real change to the scrollImages function that handles the scrolling of the image scrollbar was the addition of the changeImageOnMouseOver function that updates the onmouseover attribute for the thumbnails. We call the function in the same sequence using setTimeout so that the image src and onmouseover attributes change at the same time. If we dont keep them on the same time schedule then there is the potential that the user could hover over an image and get a different large image, title and description than the thumbnail the user hovers over. I know, this is not likely to happen but if you choose to slow down the animation effect the potential would be greater.
The most notable changes to the HTML are the addition of cells for the title and description. Each of those cells is assigned a unique ID value so that we can manipulate them in our script. The large image is also assigned a unique ID. I also set the onmouseover attribute for each of the thumbnail images so that they would function as expected when the page is first loaded.