Geek Answers Handbook

How to include an image map in a liquid layout?

Currently, I am experiencing a huge headache trying to get a site that I create to work with different permissions. The main navigation is through an image map, which should fill most of the viewing area. I know this is completely outdated, but the image map seems to be the only non-flash solution that allows you to delimit polygonal areas - I would like an alternative!

I managed to eventually resize the site so that the main image appears on smaller monitors using conditional jQuery and CSS, but it also resizes the text inside slickboxes, which looks awful!

The site (very incomplete) is here . I know that the navigation is still not entirely clear (hover and click on the colors of the flowers), but I want to sort this problem first.

My questions in short:

  • Is there an alternative way to create this polygonal tipping image of access points without using an image map?
  • Otherwise, can I resize the image card and overlaid slickboxes, while keeping the text the same size?

Thank you very much - I pulled my hair over the weekend!

+4
source share
3 answers

Edit: Percentage approach is not working.

In this case, the only thing I see is as follows:

They have forms using percentage notation:

<area shape="rect" coords="0,0,0,0" mycoords="1%,3%,25%,29%">

At the first drawing and every window change:

  • analyze each area mycoords property

  • Divide percent by four integers.

  • Calculate percent based on .width() property

  • Set the coords area coords based on calculated pixel values

Not entirely trivial, but it should be halfway easily implemented by an experienced jQueryist.

Old answer:

Hm. So, do you have an image that needs to be resized dynamically?

I have never tried this myself, but what about using relative coordinates =

  <area shape="rect" coords="1%,3%,25%,29%">

I don't know if this works, but it's worth a try.

+2
source

This is a bit limited, but you can make irregular shapes using HTML / CSS.

A list apart

CSS loading

You must be able to adapt one of them to your goals.

EDIT:

Regarding image resizing, you need to use relative widths in CSS instead of hard coding them in pixels.

In fact, there is a flexible structure that can take care of you a lot: Check the CSS grid .

+1
source

Another work around hot spots in liquid design is to create a responsive static image with links in Edge Animate. Hot spots (or layers that act as hot spots) then fully react. The downside is that a 50 KB image will be around 120 kB when exiting Edge. Having said that, this is a pretty quick job.

0
source

More articles:


All Articles