Icon Controls

Overview

Second Site supports interactive components where a person browsing the site clicks an icon to initiate an action. Such actions include starting or stopping a Slideshow and opening a Lightbox in an Image Gallery or Exhibit Gallery. This page shows the icons Second Site uses and that information will help users who want to add an icon legend to their site. This page also includes some technical details about how Second Site displays icons; that information will be of interest to a small subset of Second Site users.

Icon Color

The icons shown in the Icon Legend table below are blue. On an actual site created by Second Site, the icon color will vary according to colors selected in stylesheet properties. The same icons are used in multiple places and the color may vary from place to place.

Second Site controls the icon color via the background color of the HTML element. The shape portion of the graphic file is white, and the surrounding area is transparent. The background color is visible in the areas of the image that are transparent. Here are three background color variations for the "next" icon:

Icon Shape

In browsers that support rounded corners via CSS such as the current versions of Chrome, Firefox, Opera, and Safari, some icons will have rounded corners and appear round. In browsers that do not support rounded corners via CSS such as Internet Explorer 6, 7, and 8, the icons will be square. The screenshots below show how the icons appear in browsers that support round corners (left) and browsers that do not (right).

Icon Legend

Legend HTML

To show one of the icons above in a legend on your site, use the following HTML. Vary the second class to change the icon, i.e., change "iconprev" to "iconnext" or "iconplay". Class names are listed in the table above.

<button class="iconlegend iconprev"></button>

That will produce this icon:

Images

The following information is intended for advanced users.

All the icons shown above are part of a single PNG file. The icons are arranged in rows and columns in the image. Second Site uses the CSS background-position property to align the proper image to the background of the button element that shows the icon.

Using a single PNG file reduces the number of image files that the browser has to fetch from the web server. That helps the page load more quickly than it would load if the browser had to fetch each image from a separate image file.

This is the icons.png file. The background color has been set to gray so the white shapes will be visible.

The image is divided into a grid of six columns and three rows. Each cell in the grid is allotted 25 pixels (px) in each direction. The icons are 16px by 16px and so there is extra space on all sides of the icons.

To use a portion of that image as the background for a particular element, Second Site sets the background-position to negative values. That moves the background image up and left relative to the background of the element. For example, the yellow rectangle below represents an HTML element. Assigning background-position: -30px -5px to the element would use the "next" icon as the background. (In CSS, background position parameters are specified in left then top sequence.)

A useful way to visualize how this works is to picture the yellow rectangle fixed in place while the background image slides beneath it. The background image slides left to move from column one to column two, and it slides up to move from row one to row two.