Status: Solved
Priority: Medium
Security: Public
Views: 294
Last Modified: 2012-12-21

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;
}

mycomac

Asked: 2012-12-20

Advertise Here

HTML
CSS

2 Solutions

LVL 22

MrunalCommented: 2012-12-20

Hi mycomac,
Can you share link for this problem you are facing, so that we can get bette clear picture what you want.

LVL 46

Chris StanyonCommented: 2012-12-21

OK. A few things wrong with your code. You anchor has a class of hotspot, but your CSS is trying to style an Anchor within .hotspot. Your rule should be :

div.art-Header-jpeg a.hotspot { ... }

You're setting the top coordinate of the Hotspot to 567px but the parent container is only 150px deep so you're effectively setting it out of sight.

z-index doesn't come into it.

Have a look at this fiddle. I haven't included images, but hopefully you'll get the gist.

http://jsfiddle.net/ChrisStanyon/zY85B/

mycomacAuthor Commented: 2012-12-21

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"> </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;
}

LVL 46

Chris StanyonCommented: 2012-12-21

OK. You're nearly there. You need to set your A tag to display as a block element, so add display:block to your CSS.

div.art-Header-jpeg a.hotspot {
   display:block;
   width: 130px;
   height: 88px;
   position: relative;
   top: 44px;
   left: 567px;
}

Open in new window

Your measurements seem to be slightly off, so you might want to add a border to the anchor tag just to make it easier (border: 1px solid red;). Don't forget to remove it once you've got the positioning right.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

problem positioning a hotspot over an image

Join & Write a Comment Already a member? Login.

Featured Post