Jak udělat namapovanou oblast responsivně?

Mapování obrázku je vhodné, pokud máte nějaký atypický obrazec a chcete aby jeho různé části odkazovaly na různé odkazy.

Pokud máte obrazec namapovaný, tak je to skvělý základ, ale jak se chová mapování v responsivitě?
Mapování funguje tak, že máte obrázek o rozměru třeba 1000x500 a první namapované oblast řeší body jaké se mají spojit pro výslednou oblast. Ty body ale mají souřadnice v pixelech a to jak horizontální tak vertikální hodnotu.
Problém je, že pokud máte zařízení o šířce třeba 600px, tak hodnota bodu například 200px-200px bude umístěná jinde v obrázku o rozměru 1000x500 a jinde v tom samém obrázku 500x250 (změnšeném poměrově).

První řešení je logické => dám tam procenta místo pixelů... Jenže procenta nefungují. Co teď?

Řešení je logicky Javascript a to projekt zvaný "Image map resizer".
Odkaz: projekt na GitHub

Výsledek poté bude například takto:

Tento projekt má jednu nevýhodu a tou je, že skript funguje jen na změnu šířky daného obrázku.
Pokud potřebujete obrázek snižovat, tak skript nefunguje. Tudíž případně musíte napsat druhý skript, který bude omezovat šířku nějakého obalu daného namapovaného obrázku a skrze tuto změnu se bude obrázek zmenšovat potažmo měnit pozici namapovaných bodů...

<< zpět