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:

CodeResult

Sample picture for scroll box: Milford Sound, New Zealand
Sample picture for scroll box: Franz Josef Glacier, New Zealand

Note that the code on this page assumes that there's an image at the specified location (http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg). You will need to change this value to the URL/location of an image that you have uploaded to the web.

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:

CodeResult

Sample picture for scroll box: Milford Sound, New Zealand
Sample picture for scroll box: Franz Josef Glacier, New Zealand

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:

CodeResult

Background pictures are ideal for when you want to place text over the top of your picture. When using a background picture, scrollbars will only appear if we have enough text in the scroll box.

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

Enjoy this page?

  1. Link to this page (copy/paste into your own website or blog):
  2. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!

Sponsored Link: Design CODE-FREE Websites

Check a Domain:

ZappyHost Logo