Picture Scroll Box

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:

<!-- Codes by Quackit.com --><br /> <div style="height:221px;width:330px;overflow:scroll;"><br /> <img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /><br /><br /> <img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /><br /> </div><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p><br />

Result:

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:
<!-- Codes by Quackit.com --><br /> <div style="height:221px;width:330px;overflow:scroll;"><br /> <a href="http://www.natural-environment.com/places/milford_sound.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Milford Sound, New Zealand" /></a><br /><br /> <a href="http://www.natural-environment.com/places/franz_josef_glacier.php" target="_blank"><img src="http://i516.photobucket.com/albums/u323/natural_pics/franz_josef_glacier2.jpg" border="0" width="330" height="221" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" /></a><br /> </div><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Codes</a></p><br />

Result:

Learn more about creating links in HTML.

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:
<!-- Codes by Quackit.com --><br /> <div style="height:220px;width:325px;overflow:scroll;font:35px/45px cursive;color:#A6120D;background:url('http://i516.photobucket.com/albums/u323/natural_pics/milford_sound.jpg');">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.<br /> </div><br /> <p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Code</a></p><br />

Result:

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.