Odkazy v obrázcích.

Prezentace na téma: "Odkazy v obrázcích."— Transkript prezentace:

1 Odkazy v obrázcích

2 Map Pomocí párového tagu „map“ vytváříme odkazy (klikací mapu) v obrázku. Mapa obsahuje popis aktivních oblastí, které jsou reprezentovány tagy <area>. Pomocí jména - atributu name -- je mapa spojena s obrázkem (atribut usemap u <img>). Příklad: <map name="ctverec"> <area shape="rect" coords="78,42,162,123" href=" title="Google" /> <area shape="rect" coords="263,137,370,233" href=" title="Seznam" /> </map> <img src="a.jpg" width="640" height="400" border="0" usemap="#ctverec" />

3 Area Atributy tagu <area> Atribut Význam Hodnoty href cíl odkazu URL target cílový rám jméno rámu shape tvar oblasti rect, circle, polygon coords souřadnice oblasti čísla oddělená čárkami nohref oblast není odkazem bez hodnot alt alternativní text libovolný text Příklad: <area shape="rect" coords="79,42,163,123" target="_blank" href=" title="Google" alt "google" />

4 Atribut „shape“ Shape udává tvar odkazu: 1.Rect-obdelník 2.Circle-kruh
3. Polygon-mnohoúhelník

5 Levý horní roh, pravý dolní roh
Rect-Obdelník Zadává se Coords=“ “ Levý horní roh, pravý dolní roh Lh-x, lh-y, pd-x, pd-y Příklad: <area shape="rect" coords="423,254,557,355"/>

6 střed-x, střed-y, poloměr
Circle Kruh Zadává se Coords=“ “ Střed, poloměr střed-x, střed-y, poloměr Příklad: <area shape="circle" coords="79,70,81"/>

7 Poly-Mnohoúhleník Zadává se Coords=“ “
Souřadnice každého vrcholu za sebou Vrchol-x, vrchol-y, vrchol2-x, vrchol2-y atd. Příklad: <area shape="poly" coords="180,84,240,57,294,83,311,150,267,194,203,191"/>

8 Shape Samozřejmě můžeme tvary v tagu map kombinovat. Příklad:
<img src="aaa.jpg" width="280" height="280" border="0" usemap="#vse" /> <map name="vse"> <area shape="poly" coords="25,78,56,24,88,78" href=" title="Seznam" /> <area shape="rect" coords="116,32,163,77" href=" title="google" /> <area shape="circle" coords="225,55,28" href=" title="centrum" /> </map>

9 Děkuji za pozornost