Imágenes sensibles

Imágenes Sensibles
• Nos permiten seleccionar diferentes áreas de
una imagen como el inicio de un hiperenlace.
Imágenes Sensibles
• Requerimentos:
– Lector o servidor de HTTP, con soporte de
imágenes sensibles (imagemap (NCSA, CERN,
...), MapServe (MacHTTP))
– Lector que sorporte gráficas (GIF, JPEG)
Imágenes Sensibles
Ing. Javier Giese, MC
1
Configuración de Imágenes
Sensibles en el Servidor
Ing. Javier Giese, MC
Imágenes Sensibles
2
Configuración de ... (cont)
2.- Crear el archivo de... (cont)
1.- Crear la imagen
– Los métodos disponibles son:
v default
URL-destino por default; no coordenadas
v circle
Círculo;
2.- Crear el archivo de mapeo de la imagen:
– Las líneas que inician con # son comentarios
– El formato de los comandos es:
centro punto-circuferencia
método url_destino cord1 cord2 ... cordn
cada coordenada es del formato x,y (punto)
– El origen de la imagen es la esquina superior izquierda
Imágenes Sensibles
Ing. Javier Giese, MC
3
Configuración de ... (cont)
4
2.- Crear el archivo de... (cont)
Polígono; no requiere cerrar el
– URL puede ser:
polígono
v URL absoluto
ftp://ftp.mty.itesm.mx/pub/internet/netscape/
gopher://gopher.mty.itesm.mx/
vértice1 ... vérticeN
Soporta aproximadamente 100
v URL virtual al servidor (sin http://servidor)
vértices
v rect
Rectángulo;
v point
Punto;
/
/mty/instalaciones/campus.mapa
/~jagiese/mapa1.map
/mapas/mapa-mexico
/mapeos/mapa_campus.map
esq-sup-izq esq-inf-der
Imágenes Sensibles
Ing. Javier Giese, MC
Configuración de... (cont)
2.- Crear el archivo de... (cont)
v poly
Imágenes Sensibles
Ing. Javier Giese, MC
punto
5
Imágenes Sensibles
Ing. Javier Giese, MC
6
1
Configuración de... (cont)
Configuración de... (cont)
2.- Crear el archivo de... (cont)
2.- Crear el archivo de... (cont)
– Ejemplo:
– Consideraciones:
v Los métodos son evaluados en el orden en que se
encuentran en el achivo de mapeo
v Si hay áreas sobrepuestas se debe poner primero la que se
desea evaluar primero
v Si se usa el método point y default, cualquier lugar no
mapeado que se seleccione se considerará cercano al punto
(error)
default
rect
circle
/
http://ciu_www.unige.ch/w3catalog/
gopher://rs5.loc.gov/11/global
15,8 135,39
245,86 504,143
3.- Crear el origen del hiperenlace en un
documento en HTML:
<A HREF=“/cgi-bin/imagemap/directorio-mapa/mapa.map”>
<IMG SRC=“imagen.gif” ISMAP></A>
Imágenes Sensibles
Ing. Javier Giese, MC
7
Imágenes Sensibles
Configuración de... (cont)
5.- ¡¡¡Probar la imagen sensible!!!
6.- Errores posibles, sólo solucionables por el
administrador del servidor:
– directorio-mapa puede ser:
v URL absoluto
v URL virtual
v
4.- Subir al servidor:
Imagen
– Archivo de mapeo
– Documento en HTML
–
Ing. Javier Giese, MC
el soporte de imagenes sensibles (imagemap). También
puede originarse con una versión antigua de imagemap
9
Imágenes Sensibles
Ing. Javier Giese, MC
10
Configuración de... (cont)
7.- Errores posibles:
7.- Errores posibles: (cont)
a. Wrong number of arguments, client may not support
ISMAP.
d. Couldn’t open configuration file: archivo-mapeo
Solución: ¿Subimos el archivo de mapeo? ¿Esta
b. Your client doesn’t support image mapping
properly.
Solución a y b: Cambiar de lector
c. No map name given. Please read the
instructions.
Solución: Verificar el código, el inicio del
hiperenlace.
Ing. Javier Giese, MC
404 Not Found
The requested URL /cgi-bin/imagemap/coordenadas was not
found on this server
Solución: Pedir al administrador que instale en el servidor
Configuración de... (cont)
Imágenes Sensibles
8
Configuración de... (cont)
3.- Crear el origen del ... (cont)
Imágenes Sensibles
Ing. Javier Giese, MC
correcto el directorio en el código, el inicio del
hiperenlace?
e. Map not found in configuration file.
f. Missing y value
g. No default specified
Solución e, f y g: Revisar el archivo de mapeado
11
Imágenes Sensibles
Ing. Javier Giese, MC
12
2
Herramientas para la Creación de
Archivos de Mapeo
Configuración de... (cont)
8.- ¿Cómo agregar más imágenes sensibles?
– Repetir los pasos anteriores del 1 y esperemos
que sólo hasta el 5
Imágenes Sensibles
Ing. Javier Giese, MC
13
Configuración de Imágenes
Sensibles en el Cliente
– Web Hot Spots (Windows)
http://www.cris.com/~automata/hotspots.shtml
– Mapedit (Windows y X-Windows; WYSIWYG)
http://sunsite.unc.edu/boutell/mapedit/mapedit.html
– Map THIS! (Windows; WYSIWYG)
http://sunsite.unc.edu/boutell/mapedit/mapedit.html
– WebMap (Mac)
http://sunsite.unc.edu/boutell/mapedit/mapedit.html
Ing. Javier Giese, MC
Imágenes Sensibles
14
Configuración de ... (cont)
2.- Crear el mapeo de... (cont)
1.- Crear la imagen
Client-Side Imagemap <IMG SRC="URL" USEMAP="URL">
Map Description <MAP NAME="***"></MAP>
Map Sections <AREA SHAPE="RECT" COORDS=",,,"
HREF="URL"|NOHREF>
– Las formas (shapes) disponibles son:
v d e f a u l t URL-destino por default; no
coordenadas
v circle
Círculo;
2.- Crear el mapeo de la imagen:
centro radio
<MAP NAME="nombre">
<AREA SHAPE="forma" COORDS=",,," HREF="URL"|NOHREF>
<AREA SHAPE="forma" COORDS=",,," HREF="URL"|NOHREF>
...
</MAP>
Imágenes Sensibles
Ing. Javier Giese, MC
15
Configuración de ... (cont)
16
2.- Crear el mapeo de... (cont)
Polígono; no requiere cerrar el polígono
– URL puede ser:
v URL absoluto
vértice1 ... vérticeN
v rect
Ing. Javier Giese, MC
Configuración de... (cont)
2.- Crear el mapeo de... (cont)
v poly
Imágenes Sensibles
Soporta aproximadamente 100 vértices
v URL virtual al servidor (sin http://servidor)
Rectángulo;
v URL relativo al documento
esq-sup-izq esq-inf-der
Imágenes Sensibles
Ing. Javier Giese, MC
17
Imágenes Sensibles
Ing. Javier Giese, MC
18
3
Configuración de... (cont)
Configuración de... (cont)
3.- Crear el origen del hiperenlace en un
documento en HTML:
2.- Crear el mapeo de... (cont)
– Consideraciones:
v Los métodos son evaluados en el orden en que se
encuentran en el mapeo
v Si hay áreas sobrepuestas se debe poner primero la que se
desea evaluar primero
<IMG SRC=“imagen.gif” USEMAP=“#nombre”>
4.- ¡¡¡Probar la imagen sensible!!!
v No es necesario definir un área default
5.- ¿Cómo agregar más imágenes sensibles?
– Repetir los pasos anteriores del 1 al 4
Imágenes Sensibles
Ing. Javier Giese, MC
19
Imágenes Sensibles
Ing. Javier Giese, MC
20
Imágenes Sensibles
Todos los derechos reservados
© Copyright 2000 Javier Giese
Para hacer uso de ambas opciones:
<A HREF=“/cgi-bin/imagemap/directorio-mapa/mapa.map”>
<IMG SRC=“imagen.gif” ISMAP USEMAP=“#nombre” ></A>
Prohibida su reproducción parcial o
total sin consentimiento por escrito
del autor.
– Si puede se hace en el cliente, por ser más rápido, si no,
se ignora el USEMAP
Imágenes Sensibles
Ing. Javier Giese, MC
21
Imágenes Sensibles
Ing. Javier Giese, MC
22
4