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 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).
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.
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:
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?
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!