Click to See Complete Forum and Search --> : adding image map puts image out of alignment
damon2003
12-12-2003, 11:48 AM
Hi,
I have a table with 2 columns. The left ontains an image, the the right contains another image.
The two images are both the same height. I have added image maps to the image on the right hand side, but it moves it out of alignment with the left hand image. Is there a way round this?
Can you show us the code? Just the bit that relates to your problem.
damon2003
12-12-2003, 11:59 AM
<table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="260"><img src="images/Graphic1.jpg" width="260" height="130"></td>
<td width="1"> </td>
<td width="300" align="right"><img src="images/attractions.gif" width="300" height="130" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="1,2,302,138" href="#">
</map></td>
<td width="100"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td width="297" class="topmenulinks"><a href="javascript:popUpWindow('popups/events.htm','0','0','304','410');" title="events">Events</a></td>
<td> </td>
</tr>
</table>
OK. There are few things I would suggest that might help you out here.
You probably had non-breaking spaces in the empty td's but they don't show up on this forum. If you haven't put them in, it's a good idea - a 1x1 transparent gif is even better. (Just so they show up in the code on this forum, I've put a space in => & nbsp; ... if you cut and paste this code, remember to take them back out again).
Often, when laying out tables, don't leave any spaces between tags ... see how I've laid out the td that contains the image map. I don't break onto the next line. (It breaks below but that's just word-wrap on the forum).
It's just one of those glitches that aren't supposed to happen, but do. Most of the time, HTML ignores these spaces but sometimes it doesn't.
Hope that works!
-------------
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>& nbsp;</td>
<td width="260"><img src="images/Graphic1.jpg" width="260" height="130"></td>
<td width="1">& nbsp;</td>
<td width="300" align="right"><img src="images/attractions.gif" width="300" height="130" border="0" usemap="#Map"><map name="Map"><area shape="rect" coords="1,2,302,138" href="#"></map></td>
<td width="100">& nbsp;</td>
</tr>
<tr>
<td>& nbsp;</td>
<td>& nbsp;</td>
<td>& nbsp;</td>
<td width="297" class="topmenulinks"><a href="javascriptopUpWindow('popups/events.htm','0','0','304','410');" title="events">Events</a></td>
<td>& nbsp;</td>
</tr>
</table>
-------------
Cheers,
pnaj.
ray326
12-12-2003, 12:57 PM
Try recoding like so
<td width="300" align="right">
<img src="images/attractions.gif" width="300" height="130" border="0" usemap="#Map"></td>
<map name="Map"><area shape="rect" coords="1,2,302,138" href="#"></map>
damon2003
12-13-2003, 05:54 AM
thank you very much
giggledesign
12-13-2003, 01:33 PM
yea you can always wack you actual image map code containing the relevant link and the co-ordinates in another part of the page.
i have previously put that snippet of code in the head of the page.