Home/ Questions/Q 9239231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:56:23+00:00

I made a image map using div with a bunch of <a> inside of

  • 0

I made a “image map” using div with a bunch of <a> inside of a div. It works fine but now I want to be able to scale it so that it can resize the div but my <a> will stay in the same position relative to the div.

<div class="container">
    <a href="#a1" class="dot" style="top: 138px; left: 28px"></a>
    <a href="#a18" class="dot" style="top: 45px; left: 261px"></a>
    <a href="#a20" class="dot" style="top: 45px; left: 336px"></a>

and the css

#kit .container {
position: relative;
margin: auto;
background-image: url(../img/9829-Kit.png);
background-repeat: no-repeat;
height: 670px;
width: 700px;
}
a.dot {
position: absolute;
display: block;
height: 33px;
width: 34px;
cursor: pointer;
background-position: 0px 0px;
background-image: url(../img/dots.png);
background-repeat: no-repeat;
}
a.dot:hover {
background-position: 0px -40px;
cursor: pointer;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because you’re using pixels for your offsets, your divs will never move relative to the left and top edges of their parent. You’ll need to convert pixels to percentages, and then the child elements’ size and position will grow and move when the parent resizes.

    However, since you’re using sprites for the hover pseudo-class, the design will break if you resize your parent div, and the child divs also resize. If you don’t need the child divs to resize, leave their size as a pixel value, and just set the top/left as percentages.

    Example, the #a1 div is set to be 138px from the top, and 28px from the left.

    28px / 700px (width of parent) * 100 = 0.4%

    138px / 670px (height of parent) * 100 = 20.597015%

    So the #a1 div should have be set to have left:0.4% and top:20.597015%.

    I believe this will work as long as you’re not using margins, but actual absolute positioning. If not, you’ll have to use javascript to convert the percentage to a pixel value (based on parent size) each time the parent div is resized.

    • 0