Picture Scroll Box

Did you know that you can add pictures to your HTML scroll box? There are two ways to add pictures to your scroll box - as a foreground image, and as a background image.

Foreground Picture

Foreground pictures are ideal if you want to have many pictures inside your scroll box. If you want your users to be able to scroll through a list of images, use this code.

(Note that this example uses two images, but you can have as many images as you want).

HTML code:

Result:

Hyperlink the Image

This example is exactly the same as the previous example, except that this time we're linking the images to another website. When we click on each picture, a new window will open with the web page as specified in our HTML code. To do this, we simply surround the picture code with an HTML anchor tag (or 'a' tag) to create a hyperlink. I've also removed the border (using border="0"). Borders tend to be created automatically when you hyperlink an image in HTML.

HTML Code:

Result:

Background Pictures

You can add a background picture to your scroll box instead of a foreground picture. Background pictures are perfect for when you want to add text over the top of your picture. Here's an example:

HTML Code:

Result:

For more information on adding background images, check out the HTML background page.