Image maps in Banner

[Masselink]

I've created an custom banner on the Joshua-Nino theme. Recently i've added button whitin the image. I have put the image maps in index.tpl, but i don't know how to link the imagemap to the image. The image is called using a Banner style in CSS.

Website: http://www.iq-loos.nl

Part of index.tpl

<map name="Menu" id="Menu">
<area shape="rect" coords="-5,264,103,281" href="http://www.iq-loos.nl" target="_top" />
<area shape="rect" coords="109,262,298,305" href="http://www.iq-loos.nl/index.php?/pages/suggest.html" target="_top" /><area shape="rect" coords="475,265,580,296" href="http://www.iq-loos.nl/index.php?/pages/contactform.html" target="_top" />
<area shape="rect" coords="585,266,767,290" href="http://www.iq-loos.nl/index.php?/pages/guestbook.html" target="_top" />
</map>

Part of the stylesheet

#serendipity_banner {
font-family: Arial, sans-serif;
margin: 0px;
padding-bottom: 10px;
padding-left: 26px;
border: 1px solid #e0e0d0;
height: 272px;
background-position: top;
background-repeat: no-repeat;
background-image: url(templates/IQLoos/img/titlebg.jpg);
background-color: #acab95;
text-align: left;
}

Are there any ideas how to make the buttons work ?

[garvinhicking]

Hi!

AFAIK you cannot attach <maps> to a background image. You will need to remove the background image and instead put the JPG/icture in there via an <img usemap="#Menu"> tag.

Best regards,
Garvin

[Masselink]

it's nog an Background image, but a Banner image.

I can't use the <img isemap=#menu> from a stylesheet ??

[garvinhicking]

Hi!

All the same.

You need an <img usemap="#Menu"> tag inside the serendipity_banner DIV element within your index.tpl file. You can't make it work with CSS.

Best regards,
Garvin

[Masselink]

I understand. the Banner places the image in a table as Background therefore it's not clickable.

But when change it to a non background picture i'll loose the title tekst.

Is it possible to add a 1 pixel picture with an imagemap outside the pictures reach ?

[garvinhicking]

Hi!

There's several ways to deal with it:

1. You can use CSS for absolute positioning ('display: block; position: absolute') and then use z-index properties to place specific elements above each other. That's hard to do cross-browser, but it'S manageable.

2. You split the backgroundimage in two halfes, and just make the lower portion of it an extra <img> tag with your menu in it. This is easier to achieve, but will require some good positioning and splitting graphics.

3. You could also try to "split" your menu graphics and make them completely independent of the background image, by using semi-transparent PNG images.

Sadly that's as much specific as I can get, I'm not really skilled in this area.

Is it possible to add a 1 pixel picture with an imagemap outside the pictures reach ?

No, the imagemap needs to span exactly the area where you want mouseovers, you cannot use a background image to "overlay" an image, AFAIK.

Best regards,
Garvin