is there a way to resize an image and have an image map stay in the same place? (html/Javascript/CSS)

Question

i am currently making a website that s designed to be a test. It has an image and an image map, i am trying to use JavaScript to get the clients screen size and resize the image to fit the clients screen size but when i do the image map is not were i need it to be. Is there a way to get the image map to stay in the same place with out having to "physically" resize the image in paint or Photoshop. My site (with out getting the clients screen size). Basically i am trying to make the image fit their screen so its easier to navigate the test,its realistic, but without screwing up my image map positioning. Any hep would be much appreciated.

    `<map name="desktopmap" >
    <area onclick="correct();" shape="rect" coords="1,575,38,597"  href="OS2.html" >  
    </map>
    <img onclick=" wrong('OS2');" src = "../Pic/desktop.png" usemap = "#desktopmap" >`

Thank you.

First of all, you can find every answer just my finding the place where the cursor changes to a pointer. Second, it's hard to help with your issue without posting some code. — apohl, Mar 05 '14 at 20:37
i dont think you understood my issue when the image is resized the image map moves. is there a way to get it to not move. — Dave Cribbs, Mar 05 '14 at 20:42
What you can do is use absolutely positioned divs with percentage-based coordinates and widths and hook your click events into those. Image maps are a bit outdated. — justisb, Mar 05 '14 at 20:43
possible duplicate of [Making Hard-coded -dimensions with relative values reusable with area -map?](http://stackoverflow.com/questions/10201386/making-hard-coded-dimensions-with-relative-values-reusable-with-area-map), http://stackoverflow.com/questions/11363358/is-possible-create-map-html-area-in-percentage — CBroe, Mar 05 '14 at 20:59

justisb · Accepted Answer · 2014-03-05T21:00:14.450

What you can do instead is use absolutely positioned divs with percentage-based coordinates and dimensions, and hook your click events into those. That should allow your invisible "buttons" to scale nicely with the image. Image maps are a bit outdated and not very flexible.

Example fiddle (updated with correct/wrong functions):

http://jsfiddle.net/3ZLeK/1/

Example new HTML structure:

<div class="wrap">
    <img class="bg" src="http://i.imgur.com/WgsCTDj.gif" />
    <div class="box box1"></div>    
</div>

Example new CSS:

.wrap {
    position: relative;
    overflow: auto;
}

.bg {
    float: left;
    width: 100%;
}

.box {
    position: absolute;
    cursor: pointer;
}
.box1 {
    top: 95%;
    left: 0;
    width: 7%;
    height: 5%;
}

In the fiddle I also changed your inline Javascript handling to use event handlers, because those attribute handlers are outdated as well.

score 0 · Answer 2 · answered Mar 05 '14 at 20:51

You may use mediaqueries to rescale/zoom your map . two experimental test here : http://dabblet.com/gist/5586117 and http://codepen.io/gcyrillus/pen/AJHmt

If you follow this idea, and think of using zoom + javascript instead of mediaquerie to include older browser such as IE , beaware of that some version of IE understands both : transform:scale(x); and zoom:X; . make sure you do not aplly twice a rescalling in that case.

Basicly , coords are pixels coordonates, a scaling is the only way, unless you modyfy each values of each coords :)

... not too sure my english is clear/correct enough.

is there a way to resize an image and have an image map stay in the same place? (html/Javascript/CSS)

2 Answers2