Hola amigo Chuchi.
Encantado de poderte dar algunas indicaciones que espero te resulten útiles.
PreliminaresPrimero conviene que tengas preparada la imagen para web, o sea, darle el tamaño el peso y el formato apropiados para publicarlos en web (jpeg, gif o png auque para este trabajo no estoy seguro de poderte aconsejar png).
La optimización puedes hacerla con el mismo Phptoshop: primero en la barra de menú “imagen” eliges la opción tamaño de imagen y la regulas al tamaño adecuado, luego en archvo seleccionas la opción “guardar par web”. Eso hace que se te abra el ImageReady que te permite buscar un equilibrio entre peso y calidad de la imagen.
El Image Ready tiene una ventana con cuatro pestañas: original, optimizada, dos copias, cuatro copias. Para aligerar la imagen te aconsejo trabajar con la pestaña cuatro copias que te permite comparar las imágenes: seleccionas la más ligerita y vas modificando los valores de optimización en el selector apropiado (el que tiene la pestaña “optimizar).
Cuando tengas la imagen lista, la guardas prestando atención de ponerle un nombre válido para la web (nada de espacios en blanco, que se tienen que rellenar con guiones, nada de signos especiales, nada de eñes, nada de puntos , de barras…)
Al grano.Vamos ahora a crear el mapa de imagen.
Yo, para el ejemplo, he elegido esta imagen que brinda salud:
Abre tu imagen aligerada con el Image Ready. O, si ya la tienes abierta con Potoshop, menú “Archivo” > “editar con ImageReady”. El resultado es identico.
captura 1La paleta de herramienta tiene una que se llama “mapa de imágenes poligonal”
captura 2Con esa herramienta vas dibujando la zona de la imagen que quieres seleccionar para convertirla en enlace (también hay la posibilidad de crear áreas cuadradas o circulares).
captura 3 Al cerrar el polígono, se crea un mapa de imagen en la ventana contenido web y se vuelve activo el selector que contiene la pestaña “mapa de imagen”.
captura 4 En esa pestaña puedes cambiar el nombre del mapa y tendrás que introducir la url de la página que quieres enlazar. (TRUCO: Si aún no sabes exactamente la url de la página porque estás pendiente de crearla, puedes poner simplemente la dirección de la página que va a contener tu mapa. Enlazando con la propia página que la contiene esa imagen no será un enlace roto, y, una vez creada la página de destino, podrás cambiar la url en el código). El segundo campo, en mi opinión, es mejor dejarlo en blanco: sirve para indicar al navegador si quieres que el enlace se abra en la misma ventana o en una nueva. Dejarlo en blanco significa, simplemente, elegir la opción por defecto, o sea, abrir en la misma ventana.
El tercer campo (alt) va rellenado con el texto que deseas que aparezca en la imagen cuando el visitante se para encima con el ratón (aviso que el Firefox no va a obedecer a este comando, o, por lo menos, yo no he conseguido que lo haga).
Si te equivocas con un polígono, no hay problema: pinchas sobre el selector "contenido web" y lo arrastras a la papelera.
captura 5 Repite la operación para cada área de la imagen que quieras convertir en enlace.
captura 6 Una vez terminado el trabajo hay una opción en “archivo”, “ajustes de salida”, “guardar html” pero te confieso que no he sabido encontrar donde demonio se guarda.
No te asustes porque te voy a revelar el truco que he utilizado yo para conseguir ese código:
En “archivo” hay otra opción que es “previsualizar”. Bien. Elige la dichosa opción, y se abrirá el navegador con tu bonita imagen con las áreas de enlace.
Copias el código que luego tendrás que pegar en el html de tu página web, subes el archivo de la imagen, la enlazas y listo.
captura 7En el caso concreto del ejemplo el código a copiar sería
<!-- ImageReady Slices (copas-vino-para-foro.jpg) -->
<img src="Images/copas-vino-para-foro.jpg" width="350" height="263" border="0" alt="" usemap="#copas_vino_para_foro_Map">
<map name="copas_vino_para_foro_Map">
<area shape="poly" alt="enlace a seccion blancos de Rioja" coords="193,20, 263,21, 249,234, 206,234" href="url-que corresponda-enlazar.html">
<area shape="poly" alt="enlace a seccion tintos de Rioja" coords="85,53, 175,53, 164,247, 99,247, 84,56" href="url-que corresponda-enlazar.html">
</map>
<!-- End ImageReady Slices -->El resultado del ejemplo se puede visualizar
aquíBueno, Chuchi. Estas instrucciones te las debía por todos los manuales y tutoriales de fortografía de los que he disfrutado. Si hay algo de lo que no te aclaras, me lo comentas.
Un último apunte: los enlaces que hay dentro de la imagen son completamente invisibles para los buscadores: no saben leer esos fragmentos de código.
Si te interesa que google y compañía se enteren de esos enlaces tienes que ponerlos también de forma tradicional en algún sitio de la página, cosa que es oportuno hacer también por temas de accesibilidad.
Saludos. Piero
