#SharePoint – Inserare imagine cu mai multe link-uri


În activitatea curentă a unui site de SharePoint apar necesități specifice de navigare. Una din cele mai comune metode de navigare complementară meniurilor obișnuite (personalizarea meniului din stânga sau de sus) sau listelor de legături sunt imaginile. În viziunea mai multor utilizatori poți folosi o imagine pentru mai multe link-uri.

Pentru a putea să inserăm mai multe link-uri pentru o imagine trebuie să utilizăm tagul HTML IMG cu atributul usemap și tagul MAP cu opțiunile AREA.

În exemplul pe care vi-l propun voi folosi o imagine de dimensiunea 640×427 px. Imaginea va fi încărcată în SharePoint într-o bibliotecă de imagini sau active. Este foarte important în procesul de mapare a imaginii să se păstreze dimensiunea corectă a imaginii pentru a nu decala legăturile stabilite prin arii.

Ariile pe imagini pot fi definite sub formă de pătrat (rect) cu 4 coordonate, cerc (circle) cu 3 coordonate din pagină și polinom cu câte două dimensiuni pentru fiecare colț. Explicații mai elaborate puteți găsi în articolul:  How To Create Multiple Links On A Single Image With Image Map

Pentru determinarea poziției/ariei se pot utiliza resurse on-line de mapare sau aplicații clasice de editare a imaginilor. Un instrument on-line interesant poate fi accesat și utilizat pe site-ul http://www.image-maps.com/map_image.php care permite definirea și salvarea ariilor cu tot cu o serie de opțiuni specifice de formatare.

image

În Offline pentru editare eu mai folosesc din când în când versiunea de 30 de zile a aplicației Zoner Photo Studio 18 care îmi permite identificarea poziției x,y de start și început a unui pătrat sau determinarea punctului central al unui cerc.

image

Vedeți pe imagine poziția x,y a cursorului în colțul de jos al selecției.

Implementarea în SharePoint

Am încărcat imaginea în Site Assets apoi am creat o nouă pagină simplă în care am inserat imaginea și m-am asigurat că are dimensiunea dorită (640×427 px).

Din ribbonul Format Text am ales opțiunea Edit Source și am introdus codul:

<p>
   <img src=”/SiteAssets/Image.png” alt=”” style=”margin: 5px; width: 640px; height: 427px;” usemap=”#ress”/>
   <map name=”ress”>
       <area title=”Resource 1″ href=”#” shape=”rect” coords=”63,281,233,363″ alt=”Resource 1″ />
       <area title=”Resource 2″ href=”#” shape=”rect” coords=”223,182,386,254″ alt=”Resource 2″ />
       <area title=”Resource 3″ href=”#” shape=”rect” coords=”403,113,574,193″ alt=”Resource 3″ />
   </map>
    </p>

image

În forma de editare putem vizualiza în SharePoint dacă încadrarea este corectă după care putem adăuga legăturile corecte (atributul href de pe area) și salva pagina.

Sper să vă fie util!

Anunțuri

Lasă un răspuns

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s