sobota 29. října 2016

Responzivní image mapa? Nečekaný oříšek

Image-map je docela dost stará záležitost. V podstatě jde o to buďto určit souřadnice kliknutí na obrázek (server-side - parametr ismap pro html tag img) nebo, běžnější použití, přiřadit určitým částem obrázku odkaz (client-side - html tag map). Udělat správnou imagemapu nebylo nikdy jen tak a buďto to chtělo opravdu dobrou představivost, nebo schopný nástroj. Nikdo je neměl nikdy myslím moc rád. A co teprve, když se takový relikt minulosti střetne s posledními webovými trendy - konkrétně s responzivitou? No to je pak prů.. problém. Když pěkně stylem zmenšíte obrázek, nemáte jak automaticky přepočítat souřadnice mapy.

Samozřejmě jako na všechny neřešitelné html/css problémy najdete řešení celkem rychle:
  1. Na image map fungující v responzivitě existují pluginy, třeba:
    jQuery RWD Image Maps
    Image Map Resize
  2. Teoreticky by šly zadat souřadnice v mapě procentuálně (což při úpravě stávající image mapy znamená nějak sofistikovaně přepočítat), ale to prý stejně nefunguje všude.
  3. Našel jsem i nějaké css3 řešení, které ale kdoví jak kde funguje.
Osobně bych ale doporučil mapu nezmenšovat a nechat ji scrollovat. Na to malé se stejně nedá trefit, takže je to vlastně nepoužitelné.

MAKE Magazine

Technology Review RSS Feeds

Nejčtenější příspěvky