Back to the PNG overlay tutorial
Using one single IMG element comes at a price.
What's wrong with these pictures?
- In IE Win, with script disabled, this document show nothing else than height identical opaque PNG files.
- If the document is unstyled, only the PNG files show up (in all browsers).
- For a machine, all images in this document are the same.
This is a different approach; it uses proper src values, hence is more accessible.
The Markup:
<img style="background:url(jpg_1.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_2.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_3.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_4.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_5.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_6.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_7.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />
<img style="background:url(jpg_8.jpg)" src="tv.png" alt="A description of the associated JPG goes here" />