Using a link or an imagemap does not map properly within a custom panel. I copied the same html code to a generic page and it maps fine. The clickable area for the href is wide enough, but at least 50% not high enough to "cover" the image. When I use firebug, the imagemap area highlights properly, so I know the imagemap has the correct coordinates. It just isn't clickable in the lower half of the image. This is rather annoying when designing a button critical to the success of the website. I tried the simple method of wrapping an anchor tag around the img tag first, when that didn't work I tried the imagemap with exactly the same result. Tested on Safari, Chrome and Firebug with identical results. Mysteriously, IE seems to work fine. I tried both rounded corners and the default panel style.

sample code:

<div class="caption-box-right">
<img width="160" height="100" src="files/buttons/join-you4ia-button.png" usemap="#joinmap" />
<map name="joinmap">
  <area shape="rect" coords="0,0,160,100" href="/user/register" alt="Join You4ia!" />
</map>
<p>Appreciate. Celebrate. Create.</p>
</div>

Comments

stg11’s picture

Status: Active » Closed (fixed)

apparently this was caused by css: I removed float:right and it is now functioning normally.