Is it possible to build a responsive web design by using area tag element?

Answer 1

Adi Pratama, S.Kom.

mostly "according to image size"...

area 'coords' attributes must be specified in css pixels unit, in html... even if you define image size "according to @media css width": so, if you change viewport size, then image size will change, and 'coords' attributes of area element must be updated... wich is only possible with js ;P

Divya Mohan

area element itself not help to built responsive page, but should be handled when building responsive page: if related image size change according to viewport size (responsiveness) then area 'coords' attribute have to be updated accordingly ;)

Answer 2

I also thought that area tag element easier than manual css adjustment because we can use percentage unit,
But area only accept %

Answer 3

Thank you

Answer 4

only by using js to dynamically update "coords" attribute content accordingly to the image size ^^

Answer 5

Divya Mohan

area 'coords' attribute must be given in css pixels unit:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Answer 6

Adi Pratama, S.Kom. not necessarly: by using split image+anchor href+css @media width could be hard to fine layout and can quite only handle rectangular areas ^^

however, if you only need js to handle this purpose on your site (and even if you're not much skilled with js), it may be a food choice to avoid js (wich could ever be disabled by user, even if that's nowadays a low probable case) ;P

Answer 7

Adi Pratama, S.Kom. area 'coords' attribute only accept css pixels unit, not %

Answer 8

Area tag use to define an area on an image map. It will not help to built responsive page.

Answer 9

Which one is true?
According to image size or according to @media css width?

Answer 10

visph
I don't think so bcz responsive mean aspect is not changing and if aspect of image is not changing and area is in% unit no need to worry about it.

Answer 11

Hmmm 🤔 yes...
You are right visph
My bad , i forgot its unit is px fixed

Answer 12

I think, build a responsive web using original image+area+js is more difficult than using split crop image+anchor href+css @media width