Show a box on top of an image in an HTML page

Question

I have a simple HTML5 page displaying a (rather large) layout image, containing a bunch of numbered boxes. Based on a select element, I would like to show a red hollow box on the specific numbered box on the image.

This is what I have so far:

    <div data-role="content" style="scrolling: scroll; position: relative;">
         <div style="float:left; position: absolute; border: 2px solid red; left: 154px; top: 52px; width: 20px; height: 20px;"></div>
         <img alt="Floor Plan" src="../common/images/floorplan.jpg" width="100%" />
    </div>

Resulting in the following image: Showing Box on Layout Image

I guess I can prepopulate the coordinates of each numbered box and the width and height of each box in a javascript array, and then based on the select list, I can dynamically change the corresponding CSS elements for the box div. What has me stumped however is, when the browser is resized, the image automatically scales down (I am using Firefox, but I guess this is pretty common in most browsers), but the box would not scale with it.

How can I solve this issue, preferably with CSS? Any other solution welcome as well. Thanks in advance.

Nicely done. I've had to do this before with a complicated tournament bracket. Thinking back I would have done it differently, but at the time it seemed easier to overlay the results on an image background. — Wesley Murch, May 24 '14 at 19:27

score 1 · Accepted Answer · edited May 23 '17 at 10:32

I was able to roll out a solution based on a few answers on this site and the hint provided by @WesleyMurch. Essentially, I had to calculate the height and width scale separately (I was expecting that they will be the same, but they were not!), then apply the scale factor to the original left and top coordinates to get the scaled left and top coordinates. Finally, the height and width had to be specified in percentages, using an offline calculation.

Here is what the solution looks like:

<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
    function positionBox(event, x, y)
    {
        // Get the dimensions of the rendered image
        var renderedImg = event.currentTarget;
        var cw = $(renderedImg).width();
        var ch = $(renderedImg).height();

        // Get the dimensions of the original image
        var originalImage = document.getElementById("testImg");
        var nw = originalImage.naturalWidth;
        var nh = originalImage.naturalHeight;

        var newx = Math.floor((x * cw)/nw);
        var newy = Math.floor((y * ch)/nh);

        $("#redBox").css("left", newx + "px");
        $("#redBox").css("top", newy + "px");
        $("#redBox").css("visibility", "visible");

        alert("Current image dim = (" + cw + "," + ch + "), natural dim = (" + nw + ", " + nh + "), new top-left = (" + newx + ", " + newy + ")");
    }
</script>  
</head>
<body>
<div style="scrolling: scroll; position: relative;">
    <div id="redBox" style="float:left; position: absolute; border: 2px solid red; left: 0; top: 0; width: 6.3%; height: 4.6%; visibility: hidden;"></div>
    <img id="testImg" alt="Floor Plan" src="floorplan.jpg" width="100%" onload="positionBox(event, 918, 626);" />
</div>
</body>
</html>

Hope this helps someone. Some supporting threads are here, here and here.

Show a box on top of an image in an HTML page

1 Answers1