Crear un mapa html a partir d'una imatge amb Gimp

Aquest cap de setmana m’he hagut de barallar amb el Gimp per poder crear un mapa html (etiqueta «map/area») que en passar el ratolí per els diversos districtes de Barcelona es realçara l’àrea del districte pel qual es passava. Fer-ho és senzill, si saps com.

El resultat el podeu veure a la web de Barcelona Decideix (cal dir que cal editar les subimatges, però el mapa ja fa el que ha de fer).

Coses que necessitem

Necessitem una imatge base sobre la qual crear les àrees. Necessitem instal·lar el connector del gimp html-img-map. Per instal·lar aquest connector, seguiu les següents passes:

wget http://www.ms.mff.cuni.cz/~malej9am/prog/gimp/html-img-map/html-img-map.py
sudo cp html-img-map.py /usr/lib/gimp/2.0/plug-ins/
sudo chmod a+x /usr/lib/gimp/2.0/plug-ins/html-img-map.py

Caldrà reiniciar el Gimp per tal que puguem fer servir el nou connector.

Creació dels canals

Ara cal obrir la imatge original amb el Gimp:

Districtes de Barcelona

Ací es volen crear deu zones (els districtes) diferenciats. Per poder seleccionar automàticament els límits de cada districte, farem servir l’eina de selecció de regió contínua (de la caixa d’eines, la quarta començant per l’esquerra de la primera fila).

Eina de selecció de regió contínua

Un cop seleccionada l’eina, fem clic sobre qualsevol dels districtes. Podreu comprovar que automàticament es detecta la vora:

Selecció contínua - districte

Per desar el canal, haurem d’anar a Selecciona » Desa el canal. Veureu que al diàleg de canals apareix un de nou anomenat «Còpia de màscara de selecció». Aquesta operació l’hem de repetir per cada una de les subàrees de la imatge fins que les tinguem totes «canalitzades».

Nota: Cada vegada que seleccioneu un àrea i la canalitzeu, per poder després seleccionar un àrea nova, caldrà que feu clic a la pestanya de capes de la caixa de capes, canals, camins i feu clic sobre la capa principal. Si no, no vos deixarà seleccionar-ne més àrees.

Diàleg de canals de la imatge

Ara cal canviar el nom a cada un dels canals. S’ha de seguir la nomenclatura següent:
MAP name="nom_del_canal"|AREA alt="titol_del_canal" href="enllac_on_apuntara"

El connector html-img-map aprofitarà aquesta estructura per generar el codi. Llavors, ara caldrà anar fent clic sobre cada un dels canals i posar com a nom el codi anterior tot emplenant les dades per a cada àrea:

Canals reanomenats

Amb això ja només ens queda executar el connector per tal que genere el codi html amb els recorreguts de les àrees. Anem a Filtres » Web » HTML IMG MAP Generator i s’obrirà un diàleg on només hem de fer clic a la part de «Save Map to File» i posar un nom al fitxer que es desarà.

Connector html-img-map

Diàleg del connector html-img-map

En fer clic sobre «D’acord», el connector començarà a treballar. Segons el nombre d’àrees que hàgim creat, trigarà més o menys. En acabar, tindrem al mateix directori on es trobava la imatge original un fitxer nou, en aquest cas anomenat «mapa.map». Si l’obriu, veureu un codi com el següent:

[sourcecode language=”html”]<!– File generated by Gimp plug-in html-img-map. http://www.ms.mff.cuni.cz/~malej9am/prog/html-img-map.php –>
<map name="sant-marti">
<area shape="poly" coords="455,467,461,440,465,412,479,407,492,409,502,424,500,440,519,447,526,440,540,435,549,431,558,427,571,421,585,420,591,433,587,448,580,451,586,461,583,466,575,477,577,498,577,508,574,515,570,524,567,546,562,558,552,551,526,548,508,546,499,547,475,545,462,544,443,543,432,544,431,545,418,541,419,533,408,532,411,514,412,495,403,486,430,486,438,480,446,474,455,467" href="http://www.santmartidecideix.cat/" alt="Sant Martí" />
</map>
<map name="gracia">
<area shape="poly" coords="416,262,423,257,421,269,415,277,427,283,436,298,443,304,440,311,433,316,431,335,441,342,440,347,438,358,434,374,431,393,429,408,418,414,408,407,394,405,371,403,363,398,364,393,367,377,369,369,375,359,388,352,392,332,396,323,394,314,390,301,395,283,396,261,395,259,404,259,408,266,416,262" href="http://www.graciadecideix.cat/" alt="Gràcia" />
</map>
<map name="sants">
<area shape="poly" coords="166,567,172,581,160,585,149,588,137,592,123,597,111,600,108,595,103,588,90,589,83,592,68,596,65,590,55,581,50,574,46,568,41,561,33,551,28,545,21,535,17,528,13,519,8,507,5,497,5,471,9,459,13,444,16,415,22,419,30,423,41,428,49,432,57,436,68,442,76,446,84,450,91,454,99,458,107,462,114,466,122,470,130,474,139,479,147,472,151,461,154,453,163,447,171,441,190,438,193,425,198,420,203,409,208,401,209,387,211,366,221,364,237,368,247,371,256,376,269,383,280,387,284,392,278,396,272,401,269,430,269,443,273,448,279,456,283,461,289,469,296,478,302,486,310,497,318,509,318,517,313,525,303,531,297,548,294,553,291,537,268,538,270,556,263,549,249,541,246,558,227,562,213,564,211,552,200,538,191,544,187,549,168,545,158,541,169,532,165,523,157,526,149,531,141,536,131,542,123,547,117,539,102,539,104,551,93,559,109,567,127,563,145,559,163,558,166,567" href="http://www.santsmontjuicdecideix.cat/" alt="Sants-Montuïc" />
</map>
<map name="sarria">
<area shape="poly" coords="267,231,282,224,285,213,286,192,274,188,271,179,266,168,259,153,253,154,242,152,228,153,219,153,216,143,214,136,217,126,226,123,234,118,244,127,248,131,264,129,272,117,278,108,283,104,289,102,301,105,303,95,300,87,295,81,295,76,305,78,313,66,316,56,319,47,324,47,321,52,322,58,322,76,331,87,333,106,339,118,353,119,369,117,367,133,366,142,366,151,369,158,377,167,384,179,389,184,392,205,393,211,385,215,378,224,380,247,388,252,392,255,390,261,393,281,389,291,387,309,394,321,391,330,386,350,374,356,370,366,365,375,361,393,350,389,344,385,334,378,324,372,317,367,312,364,306,359,303,350,299,342,295,334,286,327,274,319,265,312,270,299,275,294,274,273,260,265,264,252,270,245,267,231" href="http://sarriasantgervasidecideix.cat/" alt="Sarrià-Sant Gervasi" />
</map>
<map name="eixample">
<area shape="poly" coords="270,434,274,403,285,396,291,392,302,385,311,380,318,377,331,378,337,382,347,389,353,393,360,398,373,405,390,407,406,409,414,417,430,418,432,401,450,403,462,416,460,436,458,450,452,459,450,466,442,472,434,478,430,481,421,485,404,477,389,474,380,472,374,464,350,459,346,452,334,450,323,457,311,465,307,486,301,478,297,473,291,465,284,456,278,448,270,434" href="http://leixampledecideix.blogspot.com/" alt="Eixample" />
</map>
<map name="nou-barris">
<area shape="poly" coords="690,267,690,280,682,288,674,295,666,303,660,311,654,318,646,324,639,329,626,335,612,341,598,347,589,351,575,357,561,363,553,367,547,374,541,378,537,372,533,365,523,366,519,368,516,356,511,343,505,331,512,328,517,310,526,307,533,304,540,294,547,282,547,268,553,255,558,255,570,252,578,263,590,264,597,259,601,255,608,250,614,246,632,249,643,257,658,255,665,264,674,271,680,264,690,267" href="http://www.noubarrisdecideix.cat/" alt="Nou Barris" />
</map>
<map name="horta">
<area shape="poly" coords="534,295,521,305,513,310,510,325,499,323,501,332,505,339,510,350,514,362,515,372,511,384,508,397,497,400,489,406,476,404,446,401,432,399,435,376,439,364,442,357,442,347,447,343,441,338,434,332,438,318,444,311,444,299,430,293,425,279,416,271,425,269,426,257,424,253,415,258,411,262,406,255,400,257,391,246,385,252,381,230,383,222,389,215,402,212,440,212,451,209,464,202,472,197,479,188,502,192,514,193,521,204,532,210,535,227,543,233,559,238,565,249,557,248,550,251,547,265,543,276,539,282,534,295" href="http://www.hortaguinardodecideix.cat/" alt="Horta-Guinardó" />
</map>
<map name="les-corts">
<area shape="poly" coords="279,385,264,379,253,372,243,368,227,364,213,360,215,356,222,348,206,346,201,341,196,334,190,326,190,318,190,300,189,286,196,279,207,280,212,274,216,259,224,249,228,242,235,237,258,234,267,237,264,249,260,255,263,270,273,292,262,297,262,315,271,319,283,327,293,336,297,344,301,355,306,363,312,366,320,371,311,376,304,380,295,385,279,385" href="http://lcd.santandreudecideix.cat/" alt="Les Corts" />
</map>
<map name="ciutat-vella">
<area shape="poly" coords="211,591,198,598,189,603,193,598,204,589,214,584,229,579,253,574,267,571,281,568,300,564,289,568,270,571,250,575,237,580,226,583,218,587,211,591" href="http://www.ciutatvelladecideix.cat/" alt="Ciutat Vella" />
</map>
<map name="ciutat-vella1">
<area shape="poly" coords="327,564,337,554,345,555,357,543,365,534,369,520,359,522,353,530,343,533,353,529,360,517,342,518,324,521,323,542,321,519,325,513,318,502,314,496,311,478,318,465,330,457,342,451,345,457,352,468,375,471,387,475,401,480,400,497,408,510,406,534,411,547,392,547,386,547,368,550,357,553,347,557,340,560,335,573,327,564" href="http://www.ciutatvelladecideix.cat/" alt="Ciutat Vella" />
</map>
<map name="sarria1">
<area shape="poly" coords="252,29,270,29,280,24,288,13,295,8,295,23,294,29,288,40,292,46,281,51,281,68,270,75,263,81,255,82,251,78,243,72,240,78,227,83,223,77,216,76,209,75,200,74,203,64,211,59,228,55,232,50,240,41,243,26,252,29" href="http://sarriasantgervasidecideix.cat/" alt="Sarrià-Sant Gervasi" />
</map>
<map name="sant-andreu">
<area shape="poly" coords="666,326,662,357,658,375,655,385,651,397,648,405,642,414,635,422,630,429,626,435,620,437,609,431,605,433,598,441,593,430,585,417,567,419,553,425,544,429,535,433,526,437,518,442,503,438,505,409,495,405,510,400,513,383,518,372,527,368,533,373,537,379,548,384,551,372,564,366,573,361,587,356,601,350,608,347,617,343,631,337,640,333,646,329,654,322,658,316,665,308,669,304,669,309,666,326" href="http://www.santandreudecideix.cat/" alt="Sant Andreu" />
</map>
[/sourcecode]

Inserció del codi a una pàgina web

Ara que ja tenim aquest codi, només cal copiar-lo i enganxar-lo al codi del nostre web. Simplement caldrà afegir al principi d’aquest codi l’enllaç a la imatge original. Podreu comprovar que es comporta com cal.

Ara bé, amb aquest codi el resultat final és una imatge on, si passem el ratolí per diverses parts, l’enllaç serà diferent, però la imatge serà sempre la mateixa (és a dir, en passar per cada una de les àrees, res no canviarà ni es mostrarà en cap altre color).

Per poder fer un mapa més «bonic», de forma que quan el ratolí es passe per cada una de les àrees es puga fer que eixa àrea es realce tot mostrant-se en un altre color (com al web de Barcelona Decideix) caldrà que feu:

1. Haureu de crear una imatge igual a l’original però amb l’àrea concreta amb el color canviat. En el cas de Barcelona Decideix això suposa crear 10 imatges, una per cada districte, on cada imatge té el districte en concret en un altre color (roig).
2. Caldrà generar un codi javascript que faça que en passar el ratolí per cada una de les àrees, canvie la imatge de fons per la imatge del districte.

Atès que això no és senzill d’explicar, tot i que en realitat no és un codi excessivament complicat, ací teniu tot el codi de la pàgina en qüestió per tal que el mireu i l’estudieu si cal.

Funció Javascript on passem les diferents imatges de fons

[sourcecode language=”javascript”]<script type="text/javascript">

var maps=new Array();
maps[0]=’/img/districtes/mapa_districtes.png’;
maps[1]=’/img/districtes/eixample_mapa.png’;
maps[2]=’/img/districtes/gracia_mapa.png’;
maps[3]=’/img/districtes/horta_mapa.png’;
maps[4]=’/img/districtes/lescorts_mapa.png’;
maps[5]=’/img/districtes/noubarris_mapa.png’;
maps[6]=’/img/districtes/santandreu_mapa.png’;
maps[7]=’/img/districtes/santmarti_mapa.png’;
maps[8]=’/img/districtes/sants_mapa.png’;
maps[9]=’/img/districtes/sarria_mapa.png’;
maps[10]=’/img/districtes/sarria_mapa.png’;
maps[11]=’/img/districtes/ciutatvella_mapa.png’;
maps[12]=’/img/districtes/ciutatvella_mapa.png’;

window.onload=function() {
elem=document.getElementsByTagName(‘area’);
for(c=0;c<elem.length;c++) {
elem[c].id=’a’+c;
elem[c].onmouseover=function() {
document.getElementById(‘pic’).src=maps[this.id.split(‘a’)[1]];
}
elem[c].onmouseout=function() {
document.getElementById(‘pic’).src=maps[0];
}
}
}
var preloads=[];

function preload(){

for(i=0;i<arguments.length;i++) {

preloads[preloads.length]=new Image();

preloads[preloads.length-1].src=arguments[i];

}
}
preload(‘/img/districtes/ciutatvella_mapa.png’,’/img/districtes/eixample_mapa.png’,’/img/districtes/gracia_mapa.png’,’/img/districtes/horta_mapa.png’,’/img/districtes/lescorts_mapa.png’,’/img/districtes/noubarris_mapa.png’,’/img/districtes/santandreu_mapa.png’,’/img/districtes/santmarti_mapa.png’,’/img/districtes/sants_mapa.png’,’/img/districtes/sarria_mapa.png’);

</script>[/sourcecode]

Codi HTML del mapa

[sourcecode language=”html”]
<img src="/img/districtes/mapa_districtes.png" id="pic" style="border: none;" alt="Shapes" usemap="#mapa"/>

<map name="mapa" id="mapa">
<area alt="Districtes" href="/districtes" shape="poly" coords="" />
<area alt="Eixample" href="http://leixampledecideix.blogspot.com/" shape="poly" coords="270,434,274,403,285,396,291,392,302,385,311,380,318,377,331,378,337,382,347,389,353,393,360,398,373,405,390,407,406,409,414,417,430,418,432,401,450,403,462,416,460,436,458,450,452,459,450,466,442,472,434,478,430,481,421,485,404,477,389,474,380,472,374,464,350,459,346,452,334,450,323,457,311,465,307,486,301,478,297,473,291,465,284,456,278,448,270,434" />
<area alt="Gràcia" href="http://www.graciadecideix.cat/" shape="poly" coords="416,262,423,257,421,269,415,277,427,283,436,298,443,304,440,311,433,316,431,335,441,342,440,347,438,358,434,374,431,393,429,408,418,414,408,407,394,405,371,403,363,398,364,393,367,377,369,369,375,359,388,352,392,332,396,323,394,314,390,301,395,283,396,261,395,259,404,259,408,266,416,262" />
<area alt="Horta-Guinardó" href="http://www.hortaguinardodecideix.cat/" shape="poly" coords="534,295,521,305,513,310,510,325,499,323,501,332,505,339,510,350,514,362,515,372,511,384,508,397,497,400,489,406,476,404,446,401,432,399,435,376,439,364,442,357,442,347,447,343,441,338,434,332,438,318,444,311,444,299,430,293,425,279,416,271,425,269,426,257,424,253,415,258,411,262,406,255,400,257,391,246,385,252,381,230,383,222,389,215,402,212,440,212,451,209,464,202,472,197,479,188,502,192,514,193,521,204,532,210,535,227,543,233,559,238,565,249,557,248,550,251,547,265,543,276,539,282,534,295" />
<area alt="Les Corts" href="http://lcd.santandreudecideix.cat/" shape="poly" coords="279,385,264,379,253,372,243,368,227,364,213,360,215,356,222,348,206,346,201,341,196,334,190,326,190,318,190,300,189,286,196,279,207,280,212,274,216,259,224,249,228,242,235,237,258,234,267,237,264,249,260,255,263,270,273,292,262,297,262,315,271,319,283,327,293,336,297,344,301,355,306,363,312,366,320,371,311,376,304,380,295,385,279,385" />
<area alt="Nou Barris" href="http://www.noubarrisdecideix.cat/" shape="poly" coords="690,267,690,280,682,288,674,295,666,303,660,311,654,318,646,324,639,329,626,335,612,341,598,347,589,351,575,357,561,363,553,367,547,374,541,378,537,372,533,365,523,366,519,368,516,356,511,343,505,331,512,328,517,310,526,307,533,304,540,294,547,282,547,268,553,255,558,255,570,252,578,263,590,264,597,259,601,255,608,250,614,246,632,249,643,257,658,255,665,264,674,271,680,264,690,267" />
<area alt="Sant Andreu" href="http://www.santandreudecideix.cat/" shape="poly" coords="666,326,662,357,658,375,655,385,651,397,648,405,642,414,635,422,630,429,626,435,620,437,609,431,605,433,598,441,593,430,585,417,567,419,553,425,544,429,535,433,526,437,518,442,503,438,505,409,495,405,510,400,513,383,518,372,527,368,533,373,537,379,548,384,551,372,564,366,573,361,587,356,601,350,608,347,617,343,631,337,640,333,646,329,654,322,658,316,665,308,669,304,669,309,666,326" />
<area alt="Sant Martí" href="http://www.santmartidecideix.cat/" shape="poly" coords="455,467,461,440,465,412,479,407,492,409,502,424,500,440,519,447,526,440,540,435,549,431,558,427,571,421,585,420,591,433,587,448,580,451,586,461,583,466,575,477,577,498,577,508,574,515,570,524,567,546,562,558,552,551,526,548,508,546,499,547,475,545,462,544,443,543,432,544,431,545,418,541,419,533,408,532,411,514,412,495,403,486,430,486,438,480,446,474,455,467" />
<area alt="Sants-Montuïc" href="http://www.santsmontjuicdecideix.cat/" shape="poly" coords="166,567,172,581,160,585,149,588,137,592,123,597,111,600,108,595,103,588,90,589,83,592,68,596,65,590,55,581,50,574,46,568,41,561,33,551,28,545,21,535,17,528,13,519,8,507,5,497,5,471,9,459,13,444,16,415,22,419,30,423,41,428,49,432,57,436,68,442,76,446,84,450,91,454,99,458,107,462,114,466,122,470,130,474,139,479,147,472,151,461,154,453,163,447,171,441,190,438,193,425,198,420,203,409,208,401,209,387,211,366,221,364,237,368,247,371,256,376,269,383,280,387,284,392,278,396,272,401,269,430,269,443,273,448,279,456,283,461,289,469,296,478,302,486,310,497,318,509,318,517,313,525,303,531,297,548,294,553,291,537,268,538,270,556,263,549,249,541,246,558,227,562,213,564,211,552,200,538,191,544,187,549,168,545,158,541,169,532,165,523,157,526,149,531,141,536,131,542,123,547,117,539,102,539,104,551,93,559,109,567,127,563,145,559,163,558,166,567" />
<area alt="Sarrià-Sant Gervasi" href="http://sarriasantgervasidecideix.cat/" shape="poly" coords="267,231,282,224,285,213,286,192,274,188,271,179,266,168,259,153,253,154,242,152,228,153,219,153,216,143,214,136,217,126,226,123,234,118,244,127,248,131,264,129,272,117,278,108,283,104,289,102,301,105,303,95,300,87,295,81,295,76,305,78,313,66,316,56,319,47,324,47,321,52,322,58,322,76,331,87,333,106,339,118,353,119,369,117,367,133,366,142,366,151,369,158,377,167,384,179,389,184,392,205,393,211,385,215,378,224,380,247,388,252,392,255,390,261,393,281,389,291,387,309,394,321,391,330,386,350,374,356,370,366,365,375,361,393,350,389,344,385,334,378,324,372,317,367,312,364,306,359,303,350,299,342,295,334,286,327,274,319,265,312,270,299,275,294,274,273,260,265,264,252,270,245,267,231" />
<area alt="Sarrià-Sant Gervasi" href="http://sarriasantgervasidecideix.cat/" shape="poly" coords="252,29,270,29,280,24,288,13,295,8,295,23,294,29,288,40,292,46,281,51,281,68,270,75,263,81,255,82,251,78,243,72,240,78,227,83,223,77,216,76,209,75,200,74,203,64,211,59,228,55,232,50,240,41,243,26,252,29" />
<area alt="Ciutat Vella" href="http://www.ciutatvelladecideix.cat/" shape="poly" coords="327,564,337,554,345,555,357,543,365,534,369,520,359,522,353,530,343,533,353,529,360,517,342,518,324,521,323,542,321,519,325,513,318,502,314,496,311,478,318,465,330,457,342,451,345,457,352,468,375,471,387,475,401,480,400,497,408,510,406,534,411,547,392,547,386,547,368,550,357,553,347,557,340,560,335,573,327,564" />
<area alt="Ciutat Vella" href="http://www.ciutatvelladecideix.cat/" shape="poly" coords="211,591,198,598,189,603,193,598,204,589,214,584,229,579,253,574,267,571,281,568,300,564,289,568,270,571,250,575,237,580,226,583,218,587,211,591" />
</map>
[/sourcecode]

En resum…

Si teniu una mica d’experiència en programació web, no tindreu cap problema en implementar això. Si sou nous, probablement tindreu molts dubtes. Podeu preguntar ací.