|
shapes -> Hotspot properties, image misalignment (9/23/2007 11:42:02)
|
Greetings,
I am attempting to create a page of small images, each linked via an image map to a separate page showing a larger version. The box is 800 px wide with no padding, each image is 240 px with no margin applied yet, float in style sheet is set at "none".
Alignment is fine by inserting 3 images per row, until I set up the image map (hotspot) using Dreamweaver CS3. After that the alignment still seems fine in design view, but not in the Firefox browser window.
In the browser window each image seems to push the one to the right of it into the next row, so it creates a long vertical column of images on the left side, instead of multiple rows of three images each. Hotspot seems to have some property that makes this happen.
Seeking cleanest solution before proceeding.
Code for first row of 3 images without hotspots/image map:
<img src="Small Images/KauilaWhite.gif" alt="Hawaiian Mermaid" width="240" height="240" border="0" /><img src="Small Images/TrackBack2-[Converted].gif" alt="Track" width="240" height="240" /> <img src="Small Images/IslandEnt.3-[Converted].gif" alt="Shark" width="239" height="242" />
Code for first row of 3 images with hotspot applied to first image:
<img src="Small Images/KauilaWhite.gif" alt="Hawaiian Mermaid" width="240" height="240" border="0" usemap="#Kaulia" />
<map name="Kaulia" id="Kaulia"><area shape="rect" coords="13,10,223,225" href="Kauila.html" alt="Hawaiian Mermaid" />
</map><img src="Small Images/TrackBack2-[Converted].gif" alt="Track" width="240" height="240" /> <img src="Small Images/IslandEnt.3-[Converted].gif" alt="Shark" width="239" height="242" />
|
|
|
|
