|
Display Overlapping Images on Your Webpage
By Stephen Bucaro
If you have several related pictures on your webpage, you could just display them
in a vertical or horizontal row, but a more creative effect would be to display
them overlapping. You could easily do this using your favorite graphics editor
to combine them into a single image, but that has a disadvantage. To re-arrange
the pictures or adjust the overlap, you need to start over each time in the
graphics editor.
In this article, I'll show you how to use a little style code to display
overlapped images on your webpage. You can re-arrange or adjust the overlap
by just changing a few numbers. I think you'll be surprised how little code
it requires and how simple it is. It all relies on style positioning.
The plan is to place all the images within an html <div> element with
its position property set to relative. This is so that the images
will behave normally by flowing into position with the rest of the content on
your webpage. The images themselves are placed in <span> elements within
the <div>. The <span> elements position properties are set
to absolute. This allows the <span>s to be positioned as required
within the <div>.
In this example, I'll use three images; arches001.jpg, arches002.jpg, and
arches003.jpg, all pictures taken at Arches National Park in Utah. Shown below
is the code to place the images, overlapping on the webpage.
<div style="position:relative;
width:424px; height:300px; float:left;">
<span style="position:absolute; top:0px; left:0px;">
<img src="arches001.jpg" />
</span>
<span style="position:absolute; top:120px; left:80px;">
<img src="arches002.jpg" />
</span>
<span style="position:absolute; top:50px; left:200px;">
<img src="arches003.jpg" />
</span>
</div>
Note that no top or left properties are specified for the
containing <div>. This is because the values of those properties will
depend upon where the <div> flows to when the browser renders the page.
Top and left properties are specified for the <span>s
within the <div>, and playing with these values is how you arrange
the images and their overlap. basically you just keep editing these numbers
and reloading the webpage until you like how it looks.
| 
Free Downloads
RSS Feed