Solved

problem positioning a hotspot over an image

Posted on 2012-12-20

HTML
CSS

2 solutions

Medium Priority

288 Views

Last Modified: 2012-12-21

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

Comment

Question by:mycomac

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 22

Expert Comment

by:Mrunal

ID: 387118932012-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 43

Assisted Solution

by:Chris Stanyon

Chris Stanyon earned 2000 total points

ID: 387128702012-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/

Author Comment

by:mycomac

ID: 387130202012-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 43

Accepted Solution

by:Chris Stanyon

Chris Stanyon earned 2000 total points

ID: 387130672012-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.

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Create a responsive confirmation popup using HTML, CSS, jQuery and Promises

Article by: Julian

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises

What makes a professional email signature?

Article by: Exclaimer

Find out what you should include to make the best professional email signature for your organization.

Embedded Audio in HTML5

Video by: Sarah

In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

HTML

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…