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é.

Animovaná Ajax Loading ikona v SVG?

Scalable Vector Graphics - SVG - oslavilo (-a?) nedávno 15. narozeniny a pět let je už "dospělé". Dosud ale není v prohlížečích plně podporováno (viz Can I use... svg) a třeba u Googlu z Chrome výpárávají již zabudovanou podporu animací SMIL (také Can I use... svg-smil).

A přitom právě "samochodná" animace je užitečná třeba pro animované ikony pro Ajax loader. Můžete si je vygenerovat třeba na webu loading.io - Your SVG + GIF Ajax Loading Icons (ano, tam získáte i CSS a GIF verze), nebo na SVG Loaders - Sam Herbert potažmo GitHub - SamHerbert/SVG-Loaders: Loading icons and small animations built with SVG and CSS, kde jsou fakt sexy kousky. Další zdroje nabízí Best CSS-SVG Loaders and Spinners na Code Geekz.

Síla použití těchto ikon se projeví při vložení do css jako "data:image".

Ale co je to vlastně platné, když Chrome 45 a Opera 32 animace SMIL neschvaluje, zatím jen stížností v konzoli. Ať to takto zůstane dlouho. ;-)