Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint #45: Image Maps

798 views

Published on

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

Published in: Education
  • Be the first to comment

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

×