Com crear un mapa d'imatges amb Gimp: 10 passos (amb imatges)

Taula de continguts:

Com crear un mapa d'imatges amb Gimp: 10 passos (amb imatges)
Com crear un mapa d'imatges amb Gimp: 10 passos (amb imatges)

Vídeo: Com crear un mapa d'imatges amb Gimp: 10 passos (amb imatges)

Vídeo: Com crear un mapa d'imatges amb Gimp: 10 passos (amb imatges)
Vídeo: Presentacions amb Google Drive: disseny i tasques avançades amb imatges 2024, Abril
Anonim

Un mapa d'imatges és una imatge amb els URL "assignats". Podeu vestir el vostre lloc web o la vostra pàgina d’inici personal amb un mapa d’imatges amb els vostres llocs preferits que vulgueu visitar. Hi ha molts programes que podeu fer, però en aquest article s'utilitzarà Gimp.

Passos

Creeu un mapa d'imatges mitjançant el pas 1 de Gimp
Creeu un mapa d'imatges mitjançant el pas 1 de Gimp

Pas 1. Poseu un gràfic inicial que mapareu

Podeu utilitzar imatges, imatges, qualsevol cosa que us funcioni. Aquí utilitzarem wikiHow, fòrum wikiHow i iGoogle.

Creeu un mapa d'imatges mitjançant el pas 2 de Gimp
Creeu un mapa d'imatges mitjançant el pas 2 de Gimp

Pas 2. Després de crear la imatge (o obrir-la), aneu a Filtres >> Web >> ImageMap

La pantalla de diàleg Gimp ImageMap

Creeu un mapa d'imatges mitjançant el pas 3 de Gimp
Creeu un mapa d'imatges mitjançant el pas 3 de Gimp

Pas 3. Feu clic al rectangle a la dreta de la pantalla i seleccioneu una de les imatges que vulgueu utilitzar

En aquesta captura de pantalla, es selecciona wikiHow. Empleneu la informació necessària a la pantalla de diàleg que apareix.

Feu clic al rectangle i veureu la ubicació exacta del gràfic

Creeu un mapa d'imatges mitjançant el pas 4 de Gimp
Creeu un mapa d'imatges mitjançant el pas 4 de Gimp

Pas 4. Continueu aquest procés durant la resta del vostre mapa

Creeu un mapa d'imatges mitjançant el pas 5 de Gimp
Creeu un mapa d'imatges mitjançant el pas 5 de Gimp

Pas 5. Un cop hàgiu acabat de definir totes les àrees d'enllaç, deseu el mapa d'imatges

GIMP oferirà automàticament desar-lo com a fitxer amb una extensió.map. Si ho desitgeu, podeu desar-lo així. Però aquest fitxer conté el codi HTML (sense imatges) que hem d’editar i copiar a la nostra pròpia pàgina web, per la qual cosa es recomana desar-lo com a [nom de fitxer].html i passar directament al pas 7.

Creeu un mapa d'imatges mitjançant el pas 6 de Gimp
Creeu un mapa d'imatges mitjançant el pas 6 de Gimp

Pas 6. SI no l'heu desat com a fitxer HTML, cerqueu-lo i canvieu el nom de l'extensió a.html

És possible que rebeu un avís sobre el canvi d’extensions de fitxer. Feu clic a Sí per continuar.

Creeu un mapa d'imatges mitjançant el pas 7 de Gimp
Creeu un mapa d'imatges mitjançant el pas 7 de Gimp

Pas 7. Utilitzeu un editor de text per obrir aquest fitxer HTML

Notareu que aquest fitxer simplement conté una llista de coordenades i URL. Aquest és el codi que indica a un navegador quins URL assignar a quina part de la vostra imatge.

Creeu un mapa d'imatges mitjançant el pas 8 de Gimp
Creeu un mapa d'imatges mitjançant el pas 8 de Gimp

Pas 8. Assegureu-vos que el camí del fitxer definit a

Image
Image

enllaços a la imatge a la qual voleu assignar els URL.

Si no l’assenyaleu correctament cap a la imatge, no es mostrarà cap imatge.

Pas 9. OPCIONAL:

Utilitzeu un navegador per obrir el fitxer HTML; si tot funciona, hauríeu de veure la imatge amb tots els URL assignats segons les àrees que hàgiu definit.

Creeu un mapa d'imatges mitjançant el pas 10 de Gimp
Creeu un mapa d'imatges mitjançant el pas 10 de Gimp

Pas 10. Afegiu el mapa d'imatges a l'HTML de la pàgina web

Haureu de copiar TOTES les línies de codi que veieu, inclòs el fitxer

etiqueta (que defineix el camí cap a la imatge d'origen) i tot el que hi ha entre les etiquetes. Això és! Estàs acabat.

Recomanat: