Webbplatsen har nu utökats med en del innehåll som hämtas från externa medier, så som det togs upp i lab 9A. En del av det som togs upp i lab 9B används i ett litet bildgalleri.
Karta och widget
På sidorna för Jönköping, Kalmar och Växjö har jag lagt in en väderwidget och en karta. Dessa är inlagda i aside-elementet och visas alltså i högerspalten, då det är ett stort fönster.
Film från YouTube
Jag har skapat en ny sida om en kolmila och på den lagt in en film från YouTube. Där visar jag också hur man kan få filmens (dvs iframe-elemntets) storlek felxibel. En iframe fungerar inte på samma sätt som en img, dvs man kan inte bara ändra width eller height och få den att behålla sina proportioner. Det funkar heller inte med att sätta max-width på den. Istället har jag lagt iframe-elementet inom ett div-element, där storleken ändras flexibelt med procentvärden. Inom div-elementet ska iframe-elementet fylla hela div-elementets storlek.
Sekvens av bilder
På sidan om kolmilan har jag också skapat ett litet bildgalleri med en sekvens av bilder. Jag har där kombinerat både användning av :hover och :checked. Bilderna visas först som små bilder och är inlagda inom labels, så att de kan kopplas till input-taggar (med hjälp av id), som ligger längre ner. På de små bilderna finns en hover-effekt som ger en liten förstoring av bilden man pekar på. Klickar man på den, väljs den input-tagg som hör till den och med hjälp av checked visas den img-tagg som ligger omdelbart efter input-taggen. Input-taggarna är av typen "radio", så det är alltid an av dem som är vald och därmed visas alltid en av de större bilderna och endast en av dem.