Cómo hacerlo:
1. Abrimos la imagen con el Gimp y vamos al menú Filtros ---> Web ---> Mapa de imagen
2. Se nos abre una nueva ventana en la que tenemos que seleccionar las áreas que vamos a marcar con una de las herramientas de la izquierda (rectángular, circular o poligonal).
4. Cada vez que hacemos una selección se abre un cuadro de diálogo con distintos campos para rellenar.
Como la quiero para que aparezca la ventanita con un texto aclaratorio relleno sólo la URL con #y un número más el nombre de la persona u objeto para que después nos sirva de ayuda. (Ejemplo: #1-estufa; #2-foco...)
Todas las áreas con su URL van apareciendo en la columna de la derecha "Selección"
5. Cuando he seleccionado todas las áreas, guardo desde el menú Archivo--->Guardar
En la ventana que se nos abre le indicamos dónde queremos guardar, le ponemos un nombre y, MUY IMPORTANTE, le cambiamos la extensión a .html para que nos la guarde como una página web.
6. Cerramos el Gimp y abrimos el archivo con el editor de páginas web Kompozer.
Ahora podemos elegir uno de estos dos caminos:
opción A) Haciendo dobleclic en cada una de las áreas que señalamos en el Gimp:
Al hacer dobleclic se nos abre el cuadro de propiedades avanzadas en el que
hemos de activar los atributos "alt" y "title" poniendo como valor la palabra o palabras que queremos que aparezcan al pasar el ratón.
opción B) Editando en html, para ello añade en cada línea de coordenadas los atributos "alt" y "title".
<html>
<head>
</head>
<body>
<img src="sotano.png" usemap="#map" border="0" height="943" width="1257"><map
name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk --><!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 --><!-- #$AUTHOR:Antonio -->
<area title="estufa" alt="estufa" shape="rect" coords="38,18,211,314" href="#1-estufa">
<area title="foco" alt="foco" shape="rect" coords="301,101,396,162" href="#2-foco">
<area title="Árbol de navidad" alt="Árbol de navidad" shape="rect" coords="555,72,745,137" href="#3-arbol.navidad">
<area title="jaula" alt="jaula" shape="rect" coords="802,164,908,288" href="#4-jaula">
<area title="recortabordes" alt="recortabordes" shape="rect" coords="786,354,861,588" href="#5-recortabordes">
<area title="macetero" alt="macetero" shape="rect" coords="231,480,322,560" href="#6-macetero">
<area title="caja de herramientas" alt="caja de herramientas" shape="rect" coords="38,461,227,581" href="#7-caja.herramientas">
<area title="báscula" alt="báscula" shape="rect" coords="56,628,196,814" href="#8-bascula">
<area title="ordenadores" alt="ordenadores" shape="rect" coords="210,596,490,752" href="#9-ordenadores">
<area title="cortacésped" alt="cortacésped" shape="poly"
coords="644,820,617,799,637,768,649,740,681,701,719,687,759,688,765,670,749,642,770,610,888,571,921,629,1059,511,1070,537,853,733,898,793,870,825"
href="#10-cortacesped">
<area title="jaula de madera" alt="jaula de madera" shape="circle" coords="1024,267,102" href="#11-jaula.madera">
<area title="pinturas" alt="pinturas" shape="rect" coords="605,351,757,476" href="#12-pinturas">
<area title="cajas" alt="cajas" shape="poly"
coords="239,316,230,121,293,122,300,172,409,170,406,133,778,198,786,331"
href="#13-cajas">
<area title="soplahojas" alt="soplahojas" shape="rect" coords="1128,293,1207,692" href="#14-soplahojas">
</map>
</body>
</html>
2 comentarios:
excelente tutorial, agradesco que lo halla compartido ya que me sirvio muchisimo \(^o^)/
es una pena no ver más comentarios... hay muchos leechers que pasan y no agradecen ¬¬
Buff, ¡¡justo lo que necesitaba!! Muchísimas gracias, tremendamente útil para los creadores de webs y usuarios de GIMP ^^
Publicar un comentario