Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
© Peter He/ ffner
© Peter He/ ffner
Eine Image Map ist eine
verweissensitive Grafik. 
D. h. man kann in einem Bild
Flachen definieren,  denen u. a.
Hyperlinks...
Eine Image Map wird Uber HTML—Code und

Koordinaten definiert. 
Damit man auch ohne groI3en Zeitaufvvand

und Programmierk...
ZI.  3IIc'_er . /oi"ocreI'tei“

Fur dieses Beispiel gibt es das Originalbild,  eines
mit blauer und eines mit roter Einfar...
/,  V’ , _,x‘ 7‘  , _ _“ ‘ I_‘): } I 3‘ L,  (M,  LA Xi VII .1‘) . ,
-I g I I I, ‘ I I I c. I J.  »  I I I 7‘ I I , :I  r I...
[— {_ L _  v_‘ Ln?  A_‘ _ ‘, };r~‘ v_ ’ ‘_} _i‘-‘) -

V I r I ’ I I r D I I I I I D I I
A .  , ,  , ,  _

_ _ .  r A _ _

...
4. Weitere Flachen definieren

 

Den vorherigen Schritt wiederholt man fur die
restlichen Flachen.
5. HTML—Code kopieren

Create Rect
Create Poly
Create Circle

Options

Account

Get Code
SweMw
Comments,  Help? 

Refresh ...
F ii jI‘t: mr I/ “~/ ‘I I3» I‘I; Ir‘*ti

[Ian H“I‘iIILe~~C: oc: I:—=  k<o'gi'i: IrI:  min :1 Ii alrrarl VAVI; IfClF‘, =.lI...
Hlelfr‘ glint:   ‘sl. l'I. li-‘ I713-ex; I'r'd‘I; :,‘n, nix:  _= .l. |.I; l’r‘ r1;i’r»'i1iif-, i'unI, iI, l_t: I:‘n, Ii-r;...
© Peter He/ ffner
Nächste SlideShare
Wird geladen in …5
×

SharePoint #45: Image Maps

767 Aufrufe

Veröffentlicht am

Verweissensitive Grafiken (Image Maps) bieten noch mehr Möglichkeiten bei der Verlinkung.

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

SharePoint #45: Image Maps

  1. 1. © Peter He/ ffner
  2. 2. © Peter He/ ffner
  3. 3. Eine Image Map ist eine verweissensitive Grafik. D. h. man kann in einem Bild Flachen definieren, denen u. a. Hyperlinks zugewiesen sind. Beispielz htt : // eterheffnende/ Im Ma . ht
  4. 4. Eine Image Map wird Uber HTML—Code und Koordinaten definiert. Damit man auch ohne groI3en Zeitaufvvand und Programmierkenntnisse eine Image Map erstellen kann, verwendet man Softwareprogramme. In diesem Beispiel wurde das On| ine—Too| "| mage-Maps" verwendet. htt : //wvvw. ima e—ma s. com und so geht's. ..
  5. 5. ZI. 3IIc'_er . /oi"ocreI'tei“ Fur dieses Beispiel gibt es das Originalbild, eines mit blauer und eines mit roter Einfarbung. Das Originalbild wird in der Software hochgeladen. Die beiden anderen Bilder stellt man im Web bereit. . ,.= r ~, > Fan my . gr ' ». .R§"; ( ‘ ‘J > f I ‘I: x{"“u 3 41:1‘ dVIQIn3'bI'd 2 Versionen Upload z. B. auf Pinterest hochladen
  6. 6. /, V’ , _,x‘ 7‘ , _ _“ ‘ I_‘): } I 3‘ L, (M, LA Xi VII .1‘) . , -I g I I I, ‘ I I I c. I J. » I I I 7‘ I I , :I r I I I . . V . L . l.: I ’_ ‘ J SI‘ ' 1‘ “Yr F‘ _“ ’__v‘ ‘ __ _ '_ , _ _V_ ‘I III V I . Il, l,I'.3.1gI§I-'_I_I. I'? I!I~fI: I I I 'I_I ,1 fjawwwgjj I mi 15.4 I mi Fag I "I I I I 1/_ J . L,, ' ’L: ' Start Building Your Image Map N ram J ‘_ ,9 I ‘ I http I*www peterheffner devImgIMap—LocatIon_256 png - / r V 1 ‘ , ‘ . _ I I V ‘ ~‘u: Ir 'iI21I)! lIII3 ll ‘ I . ‘ll ‘ L . Image-I. Iap3 ccm mai. -:-5 CIEJIIPQ Ima ups ‘Cr _. cur piqecls ‘Ln are 93 ‘ 7m pc, er‘LI ‘ ‘ ‘ Image mapping IooI "aka ‘Eur Irnag appirg to w: nevi Ie. eI and k9,; ,. Irg III . CI. ! Iweafl IS : oI‘IenI 'h€—r€— are Ions C‘ 1lLIreS bL. IIt In to create 3II I. pI-95 cf Image man: 1 e"Ior‘essI, , © Petér Heffmgu I . 'I”I"I I'. i§‘lIfI‘2I’tr?3‘Ii? ~!I"I '3-C‘2I'II'V| 'IfIi IMIITII rfifla esI‘; :f: .a F: Fl_lC'3I'l€-‘ (__: _&%"‘F. '|I"', ll? ‘EI": t.I. |
  7. 7. [— {_ L _ v_‘ Ln? A_‘ _ ‘, };r~‘ v_ ’ ‘_} _i‘-‘) - V I r I ’ I I r D I I I I I D I I A . , , , , _ _ _ . r A _ _ 1» , a . "I _ I I I I ' I lil . . .4 - I‘ . ’ Create Rect 'I_ 1 Create Poly f < ' "I _ / ’_' ’ ‘ Create Circle I I ' [ l . _I ‘ Options if ‘ ‘ L "ap URL Account _‘ 1 . l 4 _. http: II-. -/-. vw. petei'heffnelzdeI Get Code I ‘S « [ . Title 53‘/9 M-3P L I'£ ' . Sharepoint Tips &Tn'cks ’~ ' ‘« am Comments, Help? Refresh Page ’ ID Home Page i . ‘ Data IIapriligI1t Mlii: Cielr hrikzari IvIIalL. .i; iia1:Iie char: 4 A - EI; :'r'; I'ir. :I~I ciiaflrriamri. I > [fie I_. I'r| k-: s.. lCIr; a~: v;«e §llI'lI'£5$. Lf_, 'l§I'FI M . ‘ I -. [fie Ac: Ir; a-_-sat- Ciel: AIe. i:1‘it_= .nL. i;«c: ‘riic. i1Ic: It. »,~; ; s 4 II 1 I ; |'I'rl]If:1g‘| ;|'rI vmiimv . ix= II!1Inll= u=leiIimoIiIhliluuu E» g . 3 — "ouseO'. 'e" ‘I~ageLiRL: 1 03 r>as5do3g975I7I52.wo7oI3i3o3-iiiicc|91d9.jEg ‘ I~II~riL, i=«: :~7 mar‘ E~1avIv1;{; iI ‘mun ciksini Iviiau , -.: :sI‘L; ‘i= iI tliixsai ~: iI: nI Iiiaflrriaiiai-I E>*$| 'FT—llCII"LI uvflirrii CZI= .l~, ‘I = .urx»: :I; :va ElII»: :I , =.lI[; fl=7;; l‘LE_. ‘lL
  8. 8. 4. Weitere Flachen definieren Den vorherigen Schritt wiederholt man fur die restlichen Flachen.
  9. 9. 5. HTML—Code kopieren Create Rect Create Poly Create Circle Options Account Get Code SweMw Comments, Help? Refresh Page Home Page HTHL Image Map Code "‘ IIARHING - If you uploacec yo. .r image. V0. must Urge <irng id= ‘Image-Maps-Lorn-irnage-rnaps-20I‘3-O| - I5-O-«I‘3I2(II‘ src= ‘http: «iarea alt “ titl' ‘Blue href < area alt= ‘” titl- 'href= http. < rnap: > (9 Peter Heffner
  10. 10. F ii jI‘t: mr I/ “~/ ‘I I3» I‘I; Ir‘*ti [Ian H“I‘iIILe~~C: oc: I:—= k<o'gi'i: IrI: min :1 Ii alrrarl VAVI; IfClF‘, =.lI‘ia"_? ’iGIlil? -‘ In Czciriftairit: Ezcillicir W; IfcnF¢P= '"Ii I"‘i: ET~WF*‘t. ’<v__’: E ~_M, .__. _,_, ,y_V, 4 , _,, .r-. _, . _, _. __, , . a . ,,. _¢' 7 mm» I q Cnnlenl zdnu Web pm Hm me my Vroperllex : ( Content Editor I ‘ mun. -.. x mm» , = 2. 1.: en: armalxed am and g 3 mu Such tun Edrlnr. ‘, I Rich ma Editor . ‘ 5 Ta twe NTML source undo, (I: 3 J, l . . . . ' .7 edit 1 3‘ ‘ Ten Enuy -- Webpage Dialog (JV L. »vl. .=. U.l. ' 1.": .: tlr= p— I.1"H'iV‘! I’. '-‘p= ‘K. ;.4' : =—n; :—291s—:1—; s—2sno7- ; :l-"InIv= HnF: C:uL— 5-o541:“'> 5:-'25 , xc: ie= "zn. ace Ma r 1-_appea_useu_: mtle-"Shax= ccii-. r. nu s I peterhett - al: -‘lung: mp 'hCEF$/ /WV! -I. n I'ImaI; :-MAI: ax-ixage-sap: -231$-21 » «me 1A : u:ne—e: uminim: .cam/ :xmn= u1s/5d/33 :3 e-_: ~ -91: . ]pq': " nus ""'1t ‘ We _ am- ‘ . s.c . : p: / . a 2-H 9 - mm: 2 j1_nAp-)r: ca: xc: | 22 . :_ ~ - / > elk: r efiatiij nan cilia Iriratgre tvrlaip In Akiiicircz L . | I I 390/‘ . | ‘L l1IlCL. L.I’; _L}F: !‘ . =.-In = ~‘fI'I‘1=JI; £i=1/"II mg IIIIL-aoII*1I1*I*I.
  11. 11. Hlelfr‘ glint: ‘sl. l'I. li-‘ I713-ex; I'r'd‘I; :,‘n, nix: _= .l. |.I; l’r‘ r1;i’r»'i1iif-, i'unI, iI, l_t: I:‘n, Ii-r; u'r' . "'r‘+. ‘}, -I-, i'u. ni-e-. .iir:1e: ,‘nn; i,‘nr; f1i! ::t: l‘ViuVm'm. fL-.1‘"La “tr-iilr C‘ - ‘r‘»‘“T _LTL. ‘r1l1'II. Uns gibt es jetztauch "II alssmartphone-App! IL @ Peter Heffvter
  12. 12. © Peter He/ ffner

×