![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Some Notes for Future-Me on Image Mapping
Jun. 8th, 2023 04:03 pmtrying (and failing) to get accurate coords for my living room image, because the og png (on catbox) is fucking enormous and i have it sized down to 1500px wide, but none of the free online image mapping sites let you adjust image size. so all of my coords from them are starting out with like 2300px. which doesnt exist on my site since the image width is capped at 1500px.
im thinking about using krita to try to guesstimate where the right coords are? not sure how well that will work, or if maybe i can get some browser extension to show where my cursor is. idfk. heres what i know:
for whatever reason, neocities doesnt like for every image map's area to make the cursor point upon hovering, which makes trying to find out if you have your image map area in the correct spot A REAL BITCH! so to add in-line style to every <area> you have to type style="cursor:pointer". no ; or cursor="pointer" like ive been trying. for some stupid reason.
for rect shape area, the first 2 numbers are the (x,y) coords of the first point. (usually upper left-hand corner of the rectangle). the first number is how many pixels away from the left side of the image the point is, second number is how many pixels down from the top. the next 2 numbers (opposite corner of whatever the first point was - so, bottom right-hand corner) are the (x,y) coords of the second point. AND THATS ALL THE POINTS FOR A RECTANGLE!!
shape="circle" has 3 numbers, first 2 are the (x,y) coords of the circle center. third number is the RADIUS of the circle in pixels. shape="poly" has infinite numbers, every one is an (x,y) pair though. its like connect-the-dots.
im thinking about using krita to try to guesstimate where the right coords are? not sure how well that will work, or if maybe i can get some browser extension to show where my cursor is. idfk. heres what i know:
for whatever reason, neocities doesnt like for every image map's area to make the cursor point upon hovering, which makes trying to find out if you have your image map area in the correct spot A REAL BITCH! so to add in-line style to every <area> you have to type style="cursor:pointer". no ; or cursor="pointer" like ive been trying. for some stupid reason.
for rect shape area, the first 2 numbers are the (x,y) coords of the first point. (usually upper left-hand corner of the rectangle). the first number is how many pixels away from the left side of the image the point is, second number is how many pixels down from the top. the next 2 numbers (opposite corner of whatever the first point was - so, bottom right-hand corner) are the (x,y) coords of the second point. AND THATS ALL THE POINTS FOR A RECTANGLE!!
shape="circle" has 3 numbers, first 2 are the (x,y) coords of the circle center. third number is the RADIUS of the circle in pixels. shape="poly" has infinite numbers, every one is an (x,y) pair though. its like connect-the-dots.
