I have some web pages I'm working on where the text has a 7.5% left-hand margin. To allow images on the page to be captioned, images are placed in tables, 1 column by two rows, with the image in the top cell and a caption in the bottom cell. The table is aligned left and has also has a 7.5% margin set to align the left-hand side of the table with the text. The table is set so that the text wraps around the table. Left at that, there is a large white gap between the right-hand side of the table and the wrapped text. To overcome this, the table's right margin is set negative to eliminate this large gap as the text's margin seems to be enforced from the right hand side of the table, and not the page! This all works.
I want now to use highslide to show a larger version of the image in the table, so the highslide code has been placed into the table as shown in the code snippet:
Code: Select all
<p Class="DDNarrative> blah de blah ... </p> <table class="DDtableimage1"> <tr> <td> <div> <!-- 3) This is how you mark up the thumbnail image with an anchor tag around it. The anchor's href attribute defines the URL of the full-size image. --> <a href="memories_files/image001-web.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="memories_files/image001-thumb.jpg" alt="Highslide JS" title="Click to enlarge" height="187" width="250" /> </a> <!-- 4 (optional). This is how you mark up the caption. The caption must be directly after the anchor above. --> <div class="highslide-caption"> Highslide caption. </div> </div> </td> </tr> <tr> <td>Image caption below the image in the table</td> </tr> </table> <p Class="DDNarrative> blah de blah ... </p>
The cursor only turns to a magnifying glass if it is alongside the gap between two paragraphs. If the browser window size is adjusted so there is no paragraph break alongside the image, it's not possible to expand the image
How do I make the click to enlarge stuff work irrespective of where the cursor is over the image?