Î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.

Î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.

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>

Î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!