In my last article I showed you how to make a space saving image scrollbar complete with a pseudo animation effect. In this article we are going to extend the image scrollbar into a full image viewer with scrollbar. We will add functionality to change the large image, image title and image description when you hover over the thumbnail images in the scrollbar. The key topics covered in this project include the two dimensional Array, innerHTML, setAttribute, setTimeout and onmouseover.
<html >
<head>
<title>Scroll Bar Example</title>
</head>
<body onload="javascript:preloadThumbnails()">
<script language="javascript" type="text/javascript">
// Array of image data
var imageData= new Array(10)
createTwoDimensionalArray(3);
// Image path data
imageData[0][0]="image1.png";
imageData[1][0]="image2.png";
imageData[2][0]="image3.png";
imageData[3][0]="image4.png";
imageData[4][0]="image5.png";
imageData[5][0]="image6.png";
imageData[6][0]="image7.png";
imageData[7][0]="image8.png";
imageData[8][0]="image9.png";
imageData[9][0]="image10.png";
// Image title data
imageData[0][1]="Grasslands";
imageData[1][1]="Tree Canopy";
imageData[2][1]="In the Clouds";
imageData[3][1]="Sunflower Bud";
imageData[4][1]="Morning Dew";
imageData[5][1]="Hillside Tree";
imageData[6][1]="Winter Wonderland";
imageData[7][1]="Mountain View";
imageData[8][1]="Babbling Brook";
imageData[9][1]="Wooded Trail";
// Image description data
imageData[0][2]="This is the description for the first image. Here will be where we give details on the image that is currently being viewed.";
imageData[1][2]="This is the description for the second image. Here will be where we give details on the image that is currently being viewed.";
imageData[2][2]="This is the description for the third image. Here will be where we give details on the image that is currently being viewed.";
imageData[3][2]="This is the description for the fourth image. Here will be where we give details on the image that is currently being viewed.";
imageData[4][2]="This is the description for the fifth image. Here will be where we give details on the image that is currently being viewed.";
imageData[5][2]="This is the description for the sixth image. Here will be where we give details on the image that is currently being viewed.";
imageData[6][2]="This is the description for the seventh image. Here will be where we give details on the image that is currently being viewed.";
imageData[7][2]="This is the description for the eighth image. Here will be where we give details on the image that is currently being viewed.";
imageData[8][2]="This is the description for the ninth image. Here will be where we give details on the image that is currently being viewed.";
imageData[9][2]="This is the description for the tenth image. Here will be where we give details on the image that is currently being viewed.";
// Our index, boundry and scroll tracking variables
var imageIndexFirst = 0;
var imageIndexLast = 3;
var continueScroll = 0;
var maxIndex = 9;
var minIndex = 0;
// This function creates our two dimensional array
function createTwoDimensionalArray(arraySize) {
for (i = 0; i < imageData.length; ++ i)
imageData[i] = new Array(arraySize);
}
// This function preloads the thumbnail images
function preloadThumbnails() {
imageObject = new Image();
for (i = 0; i < imageData.length; ++ i)
imageObject.src = imageData[i][0];
}
// This function changes the text of a table cell
function changeCellText(cellId,myCellData){
document.getElementById(cellId).innerHTML = myCellData;
}
// This function changes the images
function changeImage(ImageToChange,MyimageData){
document.getElementById(ImageToChange).setAttribute('src',MyimageData)
}
// This function changes the image alternate text
function changeImageAlt(ImageToChange,imageData){
document.getElementById(ImageToChange).setAttribute('alt',imageData)
}
// This function changes the image alternate text
function changeImageTitle(ImageToChange,imageData){
document.getElementById(ImageToChange).setAttribute('title',imageData)
}
// This function changes the image onmouseover
function changeImageOnMouseOver(ImageToChange,imageIndex){
document.getElementById(ImageToChange).setAttribute('onmouseover','handleThumbOnMouseOver(' + imageIndex + ');')
}
// This function hanles calling on change function
// for a thumbnail onmouseover event
function handleThumbOnMouseOver(imageIndex){
changeImage('imageLarge',imageData[imageIndex][0]);
changeCellText('imageTitleCell',imageData[imageIndex][1]);
changeCellText('imageDescriptionCell',imageData[imageIndex][2]);
changeImageAlt('imageLarge',imageData[imageIndex][1] + ' - ' + imageData[imageIndex][2]);
changeImageTitle('imageLarge',imageData[imageIndex][1] + ' - ' + imageData[imageIndex][2]);
}
// This function handles the scrolling in both directions
function scrollImages(scrollDirection) {
// We need a variable for holding our working index value
var currentIndex;
// Determine which direction to scroll - default is down (left)
if (scrollDirection == 'up')
{
// Only do work if we are not to the last image
if (imageIndexLast != maxIndex)
{
// We set the color to black for both before we begin
// If we reach the end during the process we'll change the "button" color to silver
document.getElementById('scrollPreviousCell').setAttribute('style','color: Black')
document.getElementById('scrollNextCell').setAttribute('style','color: Black')
// Move our tracking indexes up one
imageIndexLast = imageIndexLast + 1;
imageIndexFirst = imageIndexFirst + 1;
// Change next "button" to silver if we are at the end
if (imageIndexLast == maxIndex)
{
document.getElementById('scrollNextCell').setAttribute('style','color: Silver')
}
// Changescrollbar images in a set delay sequence to give a pseudo-animated effect
currentIndex = imageIndexLast;
changeImage('scrollThumb4',imageData[currentIndex][0]);
changeImageOnMouseOver('scrollThumb4',currentIndex);
currentIndex = imageIndexLast - 1;
setTimeout("changeImage('scrollThumb3',imageData[" + currentIndex + "][0])",25);
setTimeout("changeImageOnMouseOver('scrollThumb3'," + currentIndex + ")",25);
currentIndex = imageIndexLast - 2;
setTimeout("changeImage('scrollThumb2',imageData[" + currentIndex + "][0])",50);
setTimeout("changeImageOnMouseOver('scrollThumb2'," + currentIndex + ")",50);
currentIndex = imageIndexLast - 3;
setTimeout("changeImage('scrollThumb1',imageData[" + currentIndex + "][0])",75);
setTimeout("changeImageOnMouseOver('scrollThumb1'," + currentIndex + ")",75);
// Wait and check to see if user is still hovering over button
// This pause gives the user a chance to move away from the button and stop scrolling
setTimeout("scrollAgain('" + scrollDirection + "')",1000);
}
}
else
{
// Only do work if we are not to the first image
if (imageIndexFirst != minIndex)
{
// We set the color to black for both before we begin
// If we reach the end during the process we'll change the "button" color to silver
document.getElementById('scrollPreviousCell').setAttribute('style','color: Black')
document.getElementById('scrollNextCell').setAttribute('style','color: Black')
// Move our tracking indexes down one
imageIndexLast = imageIndexLast - 1;
imageIndexFirst = imageIndexFirst - 1;
// Change previous "button" to silver if we are at the beginning
if (imageIndexFirst == minIndex)
{
document.getElementById('scrollPreviousCell').setAttribute('style','color: Silver')
}
// Change scrollbar images in a set delay sequence to give a pseudo-animated effect
currentIndex = imageIndexFirst;
changeImage('scrollThumb1',imageData[currentIndex][0]);
changeImageOnMouseOver('scrollThumb1',currentIndex);
currentIndex = imageIndexFirst + 1;
setTimeout("changeImage('scrollThumb2',imageData[" + currentIndex + "][0])",25);
setTimeout("changeImageOnMouseOver('scrollThumb2'," + currentIndex + ")",25);
currentIndex = imageIndexFirst + 2;
setTimeout("changeImage('scrollThumb3',imageData[" + currentIndex + "][0])",50);
setTimeout("changeImageOnMouseOver('scrollThumb3'," + currentIndex + ")",50);
currentIndex = imageIndexFirst + 3;
setTimeout("changeImage('scrollThumb4',imageData[" + currentIndex + "][0])",75);
setTimeout("changeImageOnMouseOver('scrollThumb4'," + currentIndex + ")",75);
// Wait and check to see if user is still hovering over button
// This pause gives the user a chance to move away from the button and stop scrolling
setTimeout("scrollAgain('" + scrollDirection + "')",1000);
}
}
}
// This function determines whether or not to keep scrolling
function scrollAgain(scrollDirection)
{
if (continueScroll == 1)
{
scrollImages(scrollDirection);
}
}
// This function kicks off scrolling down (left)
function scrollPrevious() {
continueScroll = 1;
scrollImages('down');
}
// This function kicks off scrolling up (right)
function scrollNext() {
continueScroll = 1;
scrollImages('up');
}
// This function stops the scrolling action
function scrollStop() {
continueScroll = 0;
}
</script>
<table border="0" cellpadding="5" cellspacing="0" width="700px">
<tr>
<td align="center" colspan="6" style="font-weight: bold; font-size: 18pt; color: silver;
background-color: maroon" id="imageTitleCell">
Grasslands</td>
</tr>
<tr>
<td align="center" colspan="6" style="background-color: maroon">
<img height="400" src="image1.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid" width="400" id="imageLarge" alt="default" /></td>
</tr>
<tr>
<td align="left" colspan="6" style="padding-right: 100px; padding-left: 100px; color: white;
background-color: maroon" id="imageDescriptionCell">
This is the description for the first image. Here will be where we give details
on the image that is currently being viewed.</td>
</tr>
<tr>
<td id="scrollPreviousCell" style="color: Silver" onmouseover="scrollPrevious();" onmouseout="scrollStop();">
<< Previous</td>
<td>
<img id="scrollThumb1" height="100" src="image1.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(0);" /></td>
<td>
<img id="scrollThumb2" height="100" src="image2.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(1);" /></td>
<td>
<img id="scrollThumb3" height="100" src="image3.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(2);" /></td>
<td>
<img id="scrollThumb4" height="100" src="image4.png" style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid" width="100" onmouseover="handleThumbOnMouseOver(3);" /></td>
<td id="scrollNextCell" style="color: Black" onmouseover="scrollNext();" onmouseout="scrollStop();">
Next >></td>
</tr>
</table>
</body>
</html>
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
