Building the Right Environment to Support AI, Machine Learning and Deep Learning
ReviewI wont be covering any of the topics surrounding how the image scrollbar piece works. If you want to learn more about the specific functionality of that piece please take a look at Web Developer Tutorial: Build Your Own Image Scrollbar.
Storing the Data: Creating a Two Dimensional ArraySince 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 - changeCellTextThis 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 - changeImageAltThis 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 - changeImageTitleThis 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 - changeImageOnMouseOverThis 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 - handleThumbOnMouseOverThis 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 FunctionsThe 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 HTMLThe 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.
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
Which topic are you interested in?
What is your company size?
What is your job title?
What is your job function?
Searching our resource database to find your matches...