Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: chuchi en 10 de Diciembre de 2007, 09:53:47 pm
-
hola de nuevo, quiero crear una web que sea un mapa y que pinchado en sus pueblos te lleve a la pagina de estos
como lo puedo hacer o con que programa???
gracias ;-)
-
Hola chuchi,
qué tal por la Rioja?.
Yo utilizo (utilizaba, ahora ya menos) el Dreamweaver. Mira si con la imagen y con el catalán que tu sabes ( :-D :-D :-D) te sale.
Enlace a tutorial en catalán.
http://www.xtec.cat/formaciotic/dvdformacio/materials/td72/d72m3/d72m3p6.htm (http://www.xtec.cat/formaciotic/dvdformacio/materials/td72/d72m3/d72m3p6.htm)
Con el Dreamweaver se puede hacer fàcilmente. Si tienes el Dreamweaver y el problema es el catalàn, dilo y te lo traduzco.
-
Hola Chuchi.
Mira si lo que hice aquí (http://www.comprarviviendaenalbacete.com/pisos-zonas/pisos_albacete.html) es más o menos lo que te gustaría realizar.
Lo realicé con el Potoshop cs.
Si corresponde más o menos con tu idea, me lo comentas y te indico como se hace (si me acuerdo)
Saludos. Piero
-
gracias asegura7 voy a probar con lo que dice piero que ya tengo el programa instalado, asi no tengo que instalar el Dreamweaver.
Piero estube mirando si se podia hacer con Potoshop, pero no encontre la opcion :ciego: :ciego:
con una breve guia lo conseguire, gracias
-
Hola amigo Chuchi.
Encantado de poderte dar algunas indicaciones que espero te resulten útiles.
Preliminares
Primero 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:
(http://www.dentistamurcia.com/extra/imagenes-para-foro/copas-vino-para-foro.jpg)
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 1 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura1-mapa-de-imagen.jpg)
La paleta de herramienta tiene una que se llama “mapa de imágenes poligonal”
captura 2 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura2-mapa-de-imagen.jpg)
Con 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 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura3-mapa-de-imagen.jpg)
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 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura4-mapa-de-imagen.jpg)
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 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura5-mapa-de-imagen.jpg)
Repite la operación para cada área de la imagen que quieras convertir en enlace.
captura 6 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura6-mapa-de-imagen.jpg)
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 7 (http://www.dentistamurcia.com/extra/imagenes-para-foro/captura7-mapa-de-imagen.jpg)
En 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í (http://www.dentistamurcia.com/extra/pagina-ejemplo/ejemplo_mapa_de_imagen.html)
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
-
muchas gracias una explicacion de lo mas detallada, me alegro que te hayan servido mis tutos de foto
mañana me pondre a provar, aver que sale ;-)
-
Muy bien Piero, lo del Ps no lo conocía.
Chuchi, con què programa haces las pàginas web?
El frontpage también trae una utilidad para los mapas.
-
Hola.
Cooomo prometido, he mejorado un poco las instrucciones. Lo que pasa es que me he tomado las copitas de vino y he teeerminado alegre. Hip ;)
Saludos
-
uso el frontpage, la verdad es que si lo puedo hacer con el mucho mejor, no sabia que se podia |o| |o|
gracias de nuevo piero :)
-
me podrias orientar en como hacerlo, no encuentro ninguna opccion
gracias :cry: :)
-
Hola chuchi.
Con FrontPage 2003:
En la página que estás creando: insertas la imagen que quieres convertir en un mapa.
Ahora necesitas ver la barra de herramienta de dibujo. Para eso:
Barra de menú:
ver > barras de herramientas > imagenes: te aparece la barra de herramienta para dibujo de imagenes.
Pinchas sobre la imagen que has insertado y la barra se vuelve activa
Selecciona la herramienta "zona activa rectangular", "circular" o "poligonal" (son las últimas de la derecha) según te convenga.
Por ejemplo, si usas la herramienta "zona activa poligonal" clic con el ratón sobre la imagen para dibujar el área y cuando, con un doble clic, cierras el polígono, te aparece el cuadro de diálogo para insertar el hipervínculo.
Saludos. Piero.
-
conseguido :) :)
muchas gracias, ahora a prepararlo ;-)