Solved

problem positioning a hotspot over an image

Posted on 2012-12-20
4
287 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;
}
0
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
  • 2
4 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 38711893
Hi mycomac,
Can you share link for this problem you are facing, so that we can get bette clear picture what you want.
0
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 total points
ID: 38712870
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/
0
 

Author Comment

by:mycomac
ID: 38713020
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;
}
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 38713067
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.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question