How to get the CSS left, top, width, height from coords?


Tags: html,css,css3,mapping,mozilla

Problem :

Using image map tool i have made 5 rectangle boxes, but instead of rectangle boxes they need to become actually <input type=text style="position:absolute; left: ??px; top: ??px; width:??px; height:??px;" /> with correct left, top, width, height

enter image description here

Image map tool:

https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

code generated:

<img src="a.png" alt="" usemap="#map" />
<map name="map">
    <area shape="rect" coords="961, 542, 1269, 611" />
    <area shape="rect" coords="245, 300, 606, 340" />
    <area shape="rect" coords="245, 247, 605, 286" />
    <area shape="rect" coords="245, 194, 605, 234" />
    <area shape="rect" coords="246, 142, 606, 183" />
</map>

How do i convert the generated coords into css left, top, width, height?



Solution :

You have the <area> coords x1, y1, x2, y2.

These are relative to the top left corner of your image which we can assume will also be the top left corner of a <div> which will contain your <input> elements x1 is left and y1 is top.

The <div> should have position: relative and the <input> have position: absolute.

Alternatively since you appear to need them right aligned you can ignore the x1 value and just set right: 0 and then you just need the top values.

This does seem a strange approach to layout rather than using the normal flow.


    CSS Howto..

    How to get Bootstrap grid spans narrower than span1?

    How to overide all css style classes in an input field without effecting other elements?

    How to send CSS to the client using HTTP response headers?

    How do I display an empty div tag with CSS?

    How to define class in CSS

    How to prevent inheritance of any css style of parent node to child node?

    How to animate two divs in html / css to make a semi-circle transition?

    How to strip CSS from a button in a jQuery Mobile dialog

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    how to get rid of the border-bottom by css?

    How to make HTML pages print at a consistent size from Chrome?

    JavaScript / Jquery : How to find line-through words

    How to do this angle background by CSS?

    CSS Dropdown menu - How to add thumbnails

    Bootstrap Icons not showing in published ASP.NET MVC application

    Liferay: how to avoid rebuilding/redeploying CSS files

    CSS: How the backgrounds can extend the border and overlap?

    How to make vim alphabetically sort CSS rules within a single line?

    How to make only background image transparent in responsive square grid?

    How to add space between border line and menu item

    How to determine if CSS has been loaded?

    Three extra pixels at the bottom of the page unaccounted for and not sure how to get rid of them?

    Percentages in CSS: How are they calculated internally?

    Background image url is not showing the image

    CSS: How to align elements around a centered element?

    How to prevent an element to get pushed down by window resize?

    How to dynicamlly center the center of a div based on screen size

    How to emulate Google's thick, red underline text decoration

    How to make text appear under div without moving other items in list?

    How do I insert an image in HTML so that its fills up the entire screen regardless of screen size?