I'm using the ImageMap extension for three images, a.gif, b.gif and c.gif which link to pages Page 1, Page 2 and Page 3 respectively. So the code to add this to a page is simply:
<imagemap>
File:a.gif|50px
default [[Page 1]]
desc none
</imagemap>
<imagemap>
File:b.gif|50px
default [[Page 2]]
desc none
</imagemap>
<imagemap>
File:c.gif|50px
default [[Page 3]]
desc none
</imagemap>
However, the images appear in a column (i.e. each on a new line) whereas I want them next to each other. Removing whitespace in the code does not help. This is the most I can reduce it to with it still being valid but the effect is the same:
<imagemap>File:a.gif|50px
default [[Page 1]]
desc none</imagemap><imagemap>File:b.gif|50px
default [[Page 2]]
desc none</imagemap><imagemap>File:c.gif|50px
default [[Page 3]]
desc none</imagemap>
I have tried using an image gallery but this does not work - apparently image galleries are not compatible with image maps.
How can I get these three images in a row with working links?
The ImageMap extension produces HTML code that looks something like this:
<div>
<a href="Page Name">
<img src="image" />
</a>
</div>
Because the <div> element in HTML is displayed as a block element by default, it shows up on it's own line and other divs are pushed down to the next line. There are a couple ways you can get around this. The easiest would be to put your images in a table like this:
{| width="100%"
|
<imagemap>
File:a.gif|50px
default [[Page 1]]
desc none
</imagemap>
|
<imagemap>
File:b.gif|50px
default [[Page 2]]
desc none
</imagemap>
|
<imagemap>
File:c.gif|50px
default [[Page 3]]
desc none
</imagemap>
|}