Obrázkové mapy
12. hodina WBA
Matěj Cajthaml — SSPŠ
©
Obrázkové mapy
Obrázkové mapy
slouží k definici mapy odkazů na obrázku
různé části, definujeme obrazci
odkazují na stejnou stránku ale i jiné
Důvod existence
hodí se na specifické věci
např. mapu státu, různé kraje, ...
nelze v podstatě udělat jinak
Definice
tvoříme pomocí tagu
map
mapa musí mít určený atribut
name
obrázkům potom definujeme atribut
usemap
s jménem
uvnitř mapy definujeme dané obrazce s odkazy
Obrazce
definujeme tagem area
povinný atribut
shape
,
coords
,
href
a
alt
typy:
rect
,
circle
a
poly
v
coords
definujeme různé parametry obrazců
Ukázka
https://www.w3schools.com/html/html_images_imagemap.asp
Celostránková webová stránka
Nové jednotky
vh
= viewport height
vw
= viewport width
1vh = jedno procento výšky zařízení
relativní jednotky
Použití
chceme-li celostránkovou webovou stránku
používáme 100vh a 100vw na tagu body
nutný reset
v dětech v body používáme již procenta
Použití
Shrnutí
Jak nastavíme pozadí prvku jako obrázek?
Jak zaplníme rodiče obrázkem aby mu zůstal stejný podíl šířky a výšky?
Jak se liší PNG, JPG, GIF a SVG?
Co jsou to pseudotřídy?
Jak zapisujeme CSS pravidlo? Jaké má části?
Děkuji za pozornost!
matej.cajthaml@ssps.cz
https://ssps.cajthaml.eu/