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:
Note that the code on this page assumes that there's an image at the specified location (/pix/milford_sound/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:
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:
For more information on adding background images, check out the HTML background page.