HTML Image help - it's driving me mad!

Elle7

I'm trying to build a site.

I need to be able to display images of the same size in rows, so that you can click the different images to go to different pages.

I've spent hours trying to do this - photo galleries don't work because I need to be able to link the photograph to the right page, and I can't get the HTML code right.

I need about three lines with five images on each.

Could anyone help me? I'd really appreciate it!

fergual2

Elle try something like this

<table cellpadding="0" cellspacing="10" width="100%">
<!-- IMAGES FOR ROW 1 -->
<tr align="left">
<td valign="bottom" width="20%">
<a href="Page1.html">
<img src="/images/thumbs/00001.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page2.html">
<img src="/images/thumbs/00002.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page3.html">
<img src="/images/thumbs/00003.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page4.html">
<img src="/images/thumbs/00004.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page5.html">
<img src="/images/thumbs/00005.jpg" border="0" alt="Click" title="Click"></a>
</td>
</tr>
<!-- CAPTIONS FOR ROW 1 -->
<tr align="left">
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
</tr>

<!-- IMAGES FOR ROW 2 -->
<tr align="left">
<td valign="bottom" width="20%">
<a href="Page6.html">
<img src="/images/thumbs/00006.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page7.html">
<img src="/images/thumbs/00007.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page8.html">
<img src="/images/thumbs/00008.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page9.html">
<img src="/images/thumbs/00009.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page10.html">
<img src="/images/thumbs/00010.jpg" border="0" alt="Click" title="Click"></a>
</td>
</tr>
<!-- CAPTIONS FOR ROW 2 -->
<tr align="left">
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
</tr>

<!-- IMAGES FOR ROW 3 -->
<tr align="left">
<td valign="bottom" width="20%">
<a href="Page11.html">
<img src="/images/thumbs/00011.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page12.html">
<img src="/images/thumbs/00012.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page13.html">
<img src="/images/thumbs/00013.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page14.html">
<img src="/images/thumbs/00014.jpg" border="0" alt="Click" title="Click"></a>
</td>
<td valign="bottom" width="20%">
<a href="Page15.html">
<img src="/images/thumbs/00015.jpg" border="0" alt="Click" title="Click"></a>
</td>
</tr>
<!-- CAPTIONS FOR ROW 3 -->
<tr align="left">
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
<td valign="top" width="20%">.</td>
</tr>
</table>

EchoLocation

As per fergual2's example above, and just to explain a little more, you simply need to enclose your images <img> within links <a>

<a href="Page1.html">

<img src="/images/thumbs/00001.jpg" border="0" alt="Click" title="Click">

</a>

Placing anything inside an <a> tag will turn it into a link, the destination of the link is set as the href attribute.

Just to trim the code down for you as well...

<table>

<tr>

<td><a><img=Image1></img></a></td>
<td><a><img=Image2></img></a></td>
<td><a><img=Image3></img></a></td>
<td><a><img=Image4></img></a></td>
<td><a><img=Image5></img></a></td>

</tr>
<tr>

<td><a><img=Image6></img></a></td>
<td><a><img=Image7></img></a></td>
<td><a><img=Image8></img></a></td>
<td><a><img=Image9></img></a></td>
<td><a><img=Image10></img></a></td>

</tr>
<tr>

<td><a><img=Image11></img></a></td>
<td><a><img=Image12></img></a></td>
<td><a><img=Image13></img></a></td>
<td><a><img=Image14></img></a></td>
<td><a><img=Image15></img></a></td>

</tr>

</table>

Just a note the <img> tags, you can either use a closing </img> tag or you can use a self-closing version by including a / at the end - <img src="/images/thumbs/00001.jpg" border="0" alt="Click" title="Click" />

InsideInsurance

Of cause the purists will say not to use a table but to position the elements using CSS but the above will work

EchoLocation

InsideInsurance wrote: »

Of cause the purists will say not to use a table but to position the elements using CSS but the above will work

Depends, these images might be correctly being presented as 'tabular' data. Ultimately though it would be correct, if not strictly necessary, 'web etiquette' to code this with divs and css.

chunter

There should be a Guantanemo for CSS fundamentalists..