Estoig Digital

Portal orientat a la recopilació de recursos i estrategies per fer a l'aula amb aplicacions portables i gratuites

Ara fa temps varem plantejar una eina portable ( HCC HTML Mapper) per “mapejar” una imatge, de manera que clicant a diferents zones de la imatge accedim a informació diferent. A l’igual que HCC HTMl Mapper han aparegut també altres recursos on-line ( per exemple Image Map Generator)  que generen un codi HTML  #map que s’afegeix a la pagina web, però que no va implícit amb la imatge en el moment d’exportar o importar.

La proposta que us presentem parteix de crear una imatge en format SVG (protocol XML) que contingui dins de la imatge el codi del mapejat de la mateixa fet que dona també facilitat de creació on-line del mapejat segon la interacció de l’úsuari amb una pagina web.

Les passes a seguir per la creació de la imatge són:

1.- Disposar de la imatge que volem mapejar. En el nostre cas farem servir la del tractat de Ialta.

2.- Ens ajudarem d’un editor SVG que ens permeti crear polilínies. Per exemple DrawSVG que és on-line .

mapejat0

3.- Accedirem a l’editor de DrawSWG, que és l’opció “Draw”

4.- Començarem per afegir la imatge que volem mapejar :

mapejat1

  1. Començarem accedint a l’apartat d’elements
  2. Escollirem imatge(Image) i l’arrossegarem al centre
  3. Ens apareixerà una imatge en miniatura per representar l’objecte imatge, i al costat una barra d’eines per poder configurar, en el nostre cas escollirem l’opció de “Upload file” per escollir la imatge des del nostre ordinador
  4. Podem veure ja la imatge escollida
  5. Pels vèrtex podem redimensionar la imatge segons ens convingui

5.- Una vegada tenim la imatge a la mida desitjada anirem a crear un polígon que tingui el contorn de cada personatge

mapejat2

6.- Fent clics amb el ratolí anirem creant un polígon que ressegueixi el contorn del personatge mapejat37.- Començarem a omplir les propietats del polígon: [Important assegurar-se de quin element configurem, ja que a vegades per equivocació podem tenir un altre element seleccionat]  En primer lloc la definició de l’element

mapejat7

  1. Quan tenim seleccionat el polígon ens mostrarà la caixa d’eines del mateix, i escollirem l’opció de configuració
  2. Veurem que ens obrirà una finestra indicant a quin element fa referència (polygon element)
  3. Començarem per la pestanya “Elment” que defineix l’element
  4. El ID ens identifica l’objecte dins del fitxer SVG, això ho podem emprar per programar esdeveniments o característiques

8.- La següent “pestanya” fa referencia a l’estil de la línia del polígon. En el nostre cas la volem transparent .

mapejat8

  1. Pestanya per configurar la línia
  2. Podem indicar un color o sense color per fer-la invisible
  3. Podem configurar la mida de la línia. Si posem 0 no es visualitzarà

9.- A continuació entrarem en el color de “relleno” del polígon(Fill style) , que volem que sigui transparent:

mapejat9

  1. Pestanya per definir l’estil de “relleno” del polígon
  2. Amb quin color volem omplir el polígon. En el nostre cas cap
  3. La opacitat del relleno, si la posem a 0 serà totalment transparent

10.- Finalment deixem pel final afegir l’enllaç. donat que si hop fem al principi ens farà molt complicat seleccionar el polígon, ja que al clicar obrirà la url de l’enllaç

mapejat10

  1. Opció de configuració de propietats
  2. Pestanya per definir les propietats de l’enllaç
  3. Títol que mostrarà quan el ratolí passi per sobre l’àrea retallada
  4. Url de la web a on anirà quan cliquem sobre el polígon
  5. Àmbit del web a on mostrarà la informació de la url

11.- Repetirem el mateix per a cada personatge

12.- Una vegada finalitzat farem la gravació com a fitxer SVG :

mapejat11

  1. Anirem a l’apartat de Documents i escollirem la opció de Gravar
  2. Obrirà una finestra i haurem d’indicar el nom que volem tingui el fitxer SVG

13.- Una vegada tenim la imatge com a fitxer SVG el podem afegir al nostre espai web com aquí mateix podeu veure, tractant-lo com una imatge normal. Podeu veure la imatge ialta2.svg

 

Les possibilitats de treball dels fitxers SVG,  és molt gran si tenim una mica de coneixements de XML ja que ens permet tractament a partir de programació del mateix web o fins i tot de Javacript.

Podem treballar el fitxer SVG amb dos modalitats:

  1. Inserir la informació de la imatge dins del fitxer de text XML, això fa que el fitxer SVG es faci molt gran i gens comprensible.
  2. Inserir només la url de la imatge, en aquest cas queda molt més simplificat , de manera que el SVG anterior ens quedaria :

<svg xmlns=”http://www.w3.org/2000/svg” width=”450px” height=”340px” xmlns:xlink=”http://www.w3.org/1999/xlink” viewBox=”0 0 450 340″ preserveAspectRatio=”none slice” >
    <rect id=”svgEditorBackground” x=”0″ y=”0″ width=”450″ height=”340″ style=”fill: none; stroke: none;”/>
    <image x=”93.2603″ y=”88.3579″ id=”e1_image” preserveAspectRatio=”xMidYMid meet” xlink:href=”http://www.estoigdigital.com/wp-content/uploads/2011/11/yalta.jpg” width=”72.8452″ height=”54.9266″ stroke=”black” style=”stroke-width: 1px;” fill=”khaki” transform=”matrix(6.15012, 0, 0, 6.15012, -571.811, -542.521)”/>
    <a id=”e153_hyperlink” xlink:title=”Winston Churchill” xlink:href=”https://ca.wikipedia.org/wiki/Winston_Churchill” target=”_blank”><polygon style=”fill-opacity: 0;” id=”e48_polygon” points=”85 99 67 111 61 130 41 145 25 151 18 160 14 170 11 183 10 202 10 212 10 227 10 229 13 232 26 236 45 239 46 242 44 333 47 333 194 335 193 331 172 241 172 238 147 187 142 182 130 154 127 154 112 140 112 127 99 108 89 97″/></a>
    <a id=”e289_hyperlink” xlink:title=”Franklin Roosvelt” xlink:href=”https://ca.wikipedia.org/wiki/Franklin_Delano_Roosevelt” target=”_blank”><polygon style=”stroke-width: 1px; fill-opacity: 0;” id=”e194_polygon” points=”212,106 209,107 190,128 190,135 190,151 179,157 159,171 164,197 178,226 179,232 189,250 190,267 204,285 204,295 204,322 204,335 216,338 326,327 326,266 301,231 290,207 283,199 216,109 214,102 216,104″ /></a>
    <a id=”e502_hyperlink” xlink:title=”Iòssif Stalin ” xlink:href=”https://ca.wikipedia.org/wiki/I%C3%B3ssif_Stalin” target=”_blank”><polygon style=”fill-opacity: 0;” id=”e369_polygon” points=”360,90 337,101 320,126 313,153 310,160 297,176 295,184 304,206 308,210 321,228 325,231 340,250 344,261 353,279 353,294 353,304 353,320 353,332 353,334 448,336 446,255 418,238 413,232 407,215 405,199″/></a>
</svg>

** Si copieu aquest codi i el graveu amb l’extensió SVG podreu visualitzar la imatge mapejada

 

 

 

 

var hupso_twitter_via="estoigdigital";var hupso_url_t="";

Comments are closed.

Translate

Buscar al lloc

L'estoid digital a la xarxa