Klikbart kort eller billede

posted in: Internet, Programmering | 0

Titlen er lidt noget sludder: Du kan jo altid klikke på et billede eller et kort – det er bare ikke sikkert, at der sker noget ved det. Men et billede, hvor du kan klikke i forskellige områder af billedet (hotspots) og få vist supplerende informationer, kan være ret nyttigt.

Du kan lave noget sådant på mange forskellige måder, fx med Word, PDF, HTML (med map tag eller med et hjælpeprogram), CSS (se vejledning eller video) og SVG.

Fordelen ved Word er, at det ofte er et program, som du har tilgængelig i forvejen. Og så er tricket egentlig bare at lade et stort billede være baggrund og så lave en tabel med URL referencer i de enkelte søjler. Når du er tilfreds ændrer du tabellens egenskaber så den bliver usynlig, fx ved at lægge den “bag” baggrundsbilledet. De ting, der vises, når du klikker, skal være noget, der har en URL adresse – altså ligger på en server et eller andet sted. Selve Word dokumentet kan ligge hvor som helst og fx ogfså sendes som et bilag til en mail.

Eller du kan lave det om til (Gem som…) en pdf fil og så distribuere den.

På den måde kan du kun lave firkantede områder, som der kan klikkes i. Med SVG (vektorgrafik, hvis størrelse ændres problemfrit ved visning på PC, iPad eller telefon) kan du stort set lave områder som det passer dig. Meget fleksibelt, men også noget mere besærligt at lave. Se fx denne vejledning: researchasahobby highlighted-areas-links-responsive-image

Når du alligevel skal have de ting, der vises ved klik på et område, til at ligge på nettet, kan du jo lige så godt lægge det hele på nettet og der findes flere udvidelser til WordPress, der på ret enkel vis kan gøre det muligt at lave et klikbart billede eller kort, fx Image Map Pro og Image Hotspot.

Her er et simpelt eksempel lavet med Image Map Pro (kun de første to billeder er hotspot):