Link to home
Get AccessLog in
Avatar of Jeff McClellan
Jeff McClellanFlag for United States of America

asked on

problem positioning a hotspot over an image

I'm having a problem positioning a hotspot (should be a rectangle 230px wide by 88px high) over an image in a web page header.  Rather than appearing over top of the image using the coordinates defined in the CSS, it displays right before the image.  What am I doing wrong?

Here's what I have:

HTML

<div class="art-Header">
    <jdoc:include type="modules" name="Search-box" />
    <div class="art-Header-jpeg">
            <a href="http://www.agro-k.com/index.php?option=com_alfcontact&Itemid=148" class="hotspot" title="Contact Us">&nbsp</a>
      </div>
</div>

CSS

div.art-Header-jpeg
{
      position: absolute;
      z-index:-1;
      top: 30;
      left: 0;
      width: 906px;
      height: 150px;
      background-image: url('../images/Header.png');
      background-repeat: no-repeat;
      background-position: center center;
}


div.art-Header-jpeg .hotspot a
{
    width: 130px; height: 88px;
    position: absolute;
    top: 567px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
    left: 44px; /* Left coord of hotspot (right: 20px is also valid); */
      z-index:100;
}
Avatar of Mrunal
Mrunal
Flag of India image

Hi mycomac,
Can you share link for this problem you are facing, so that we can get bette clear picture what you want.
SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access
Avatar of Jeff McClellan

ASKER

I made the changes (I think) that you suggested, but still don't have the hotspot positioned over the Name/address area of the header.  I've left it for you to see at http://www.agro-k.com/

The hotspot is located right below the search box.

here is the html and css I have

HTML
<div class="art-Header">
    <div class="art-Header-jpeg">
        <a href="http://www.agro-k.com/index.php?option=com_alfcontact&Itemid=148" class="hotspot" title="Contact Us">&nbsp;</a>
    </div>
</div>

CSS
div.art-Header-jpeg
{
      position: absolute;
      z-index:-1;
      top: 30;
      left: 0;
      width: 906px;
      height: 150px;
      background-image: url('../images/Header.png');
      background-repeat: no-repeat;
      background-position: center center;
}
div.art-Header-jpeg a.hotspot
{
    width: 130px; height: 88px;
    position: relative;
    top: 44px; /* Top coord of hotspot (relative to parent, bottom: 20px is also valid) */
    left: 567px; /* Left coord of hotspot (right: 20px is also valid); */
      z-index:100;
}
ASKER CERTIFIED SOLUTION
Link to home
membership
This content is only available to members.
To access this content, you must be a member of Experts Exchange.
Get Access