[FrontPage] Insertar "Hyperlink" de otra forma

Vercceti · #1 (**permalink**) 04/04/2007, 10:30

Hola.

Tengo la versión 2003 de Microsoft FrontPage. Lo que quería saber es dónde acceder para insertar un "hyperlink" en mi web html.

Por ejemplo, tenemos en la web un fondo negro. Luego hay 3 cuadros de tres colores distintos en el mismo fondo. Si pico en el fondo y le doy a insertar Hyperlink, cuando arrastro el ratón por todo el fondo negro con los cuadros me aparece la mano para ir al link. Eso bien, pero lo que yo quiero conseguir es que sólo aparezca la mano de ir al link cuando paso por un sitio determinado del fondo. O lo que es lo mismo, insertar un hyperlink en un sector determinado de la imágen. Me acuerdo que en Microsoft Publisher se podía conseguir, pero en FrontPage no sé cómo hacerlo...

Gracias de antemano.

Salu2.

juaniquillo · #2 (**permalink**) 04/04/2007, 14:08

Me imagino que lo que quieres hacer es un 'mapping' de la imagen. Dale click a la imagen y en el menú que te sale en la parte de abajo hay unos botones para hacer el mapping. Tienes el cuadrado, círculo y el de forma irregular.

Escoge el que quieras y marca la región de la imagen que quieres que sea un enlace. Luego te saldrá la ventana de enlace donde colocarás la dirección donde quieres que el enlace lleve al usuario.

Vercceti · #3 (**permalink**) 09/04/2007, 11:14

Bueno, me está dando un resultado totalmente diferente al que quiero (capturas en gif para una carga mucho más rápida):

Vista Previa en FrontPage:

Vista en el Navegador (Mozilla Firefox):

Lo que he hecho ha sido hacer un cuadro de esos con la herrramienta de formas, ponerle un link y darle un 100% de transparencia. En la segunda imágen de ambas me ha pasado lo mismo, solo que esta vez no lo he puesto transparente al 100% pero me sigue ocultándolo...

Gracias de nuevo.

Salu2.

juaniquillo · #4 (**permalink**) 09/04/2007, 15:09

Pues yo tampoco entiendo. Tampoco uso imagemaps desde hace años. Si quieres pon el código para ver que pasa, o mejor, déjanos la dirección de la pagina 'online'.

Vercceti · #5 (**permalink**) 10/04/2007, 07:23

La dirección es la que viene en el navegador: http://www.playnread.com/indice.htm

No sé si hay que guardar las formas en gif o algo, pero me parece muy extraño...

juaniquillo · #6 (**permalink**) 10/04/2007, 07:45

Pues tengo que decirte que tu código deja mucho que desear. El problema es que FP coloca mucho código que solo puede ser interpretado por IE. Lo que hace FP es poner un div encima del enlace y ahí coloca una imagen que no existe. Eso es lo que no me gusta de FP, mucho código basura. Este es el código que se usa para un imagemap:

Código HTML:

<map name="Map"><area shape="rect" coords="86,246,306,298" href="noticias.htm" usemap="#noticias" border="0">

Sólo se especifican las coordenadas donde está el link, en este caso el de noticias. Tampoco es necesario que metas la imagen en un spam y le des posición absoluta.

Pero, si te puedo recomendar algunas cosas, yo no tendría una imagen tan grande en una página. Lo mismo lo puedes hacer con html/css y tendras una página menos pesada.

Vercceti · #7 (**permalink**) 11/04/2007, 07:36

¿Para qué sirve exactamente? ¿dónde lo pongo?

Sí, tienes razón, el planteamiento de hacer la web prácticamente con una imagen ocupa mucho. Entonces, ¿qué programa me recomiendas que no sea FP?, ¿sabes de algún sitio que te inicie en código html y css para conseguir lo que yo quiero.

Muchas gracias.

juaniquillo · #8 (**permalink**) 11/04/2007, 08:27

Aquí te dejo un ejemplo de tu pagina solo con la imagen. He quitado todo el otro código. He hecho los primeros dos enlaces. Verás que están enlazadas a paginas que no existen, pero solo cambias la dirección de las paginas que tu quieras. La declaración (el doctype) lo he dejado porque eso ya es meterse en otra serie de recomendaciones:

http://juaniquillo.110mb.com/pruebas/prueba1.html

Para responder tu segunda inquietud, yo uso varios editores dependiendo de lo que estoy haciendo, pero el que más uso es Dreamweaver. Tienes mucho más control del código que se genera. El convertir un diseño de imagen a html es algo más complejo. Básicamente te trata de convertir a html todos los elementos que se pueda, como Texto, colores planos, etc. Es la parte que, por lo menos a mi, me toma mucho tiempo si quiero que la página este bien optimizada y que para que el html sea válido según las recomendaciones de la W3C.

Vercceti · #9 (**permalink**) 11/04/2007, 09:07

He reservado ya la actualización del DW CS3 (cuesta un ojo de la cara, por cierto), pero con la versión anterior me las apaño perfectamente.

Como veo que se van a mezclar temas distintos al del título, abro un nuevo post: http://www.forosdelweb.com/f4/utilizar-html-css-para-conseguir-diseno-web-480461/#post1963316

Gracias juaniquillo, ahora si que lo he logrado.

Respecto a lo de el degradado de las formas, también se podrán hacer en DW y mejor, ¿no?

Salu2.

juaniquillo · #10 (**permalink**) 11/04/2007, 10:22

Los degradados es mejor hacerlo con imágenes, según mi opinión. Aunque para eso no se usan imágenes que llenen todo el fondo (algo que nunca es recomendable), sino que se usan imágenes de patrones en combinación con colores planos. Pero todo depende del caso.

vega10 · #11 (**permalink**) 15/04/2007, 18:44

Qeria sus msn porq tengo un par de dudas soy principiante y necesito saver un par de cosas por favor me podrian dejar su msn !!!!

juaniquillo · #12 (**permalink**) 15/04/2007, 23:18

Lo siento, pero no uso el MSN. Si tienes una duda puedes dejar un mensaje nuevo y trataremos de ayudarte en lo que podamos.

kadiz · #13 (**permalink**) 19/07/2007, 19:44

haa
no se si el tema es muy antiguo
pero yo quiero hacer eso pero en dreamweaver
porfa...
eso necesito
ojala me respondan :D

juaniquillo · #14 (**permalink**) 20/07/2007, 22:15

en DW es lo mismo. Le das un click a la imagen y en el 'Properties Inspector' te salen unos botones para escoger el area del image map. uno es un flecha para escoger/mover el área, y los otros 3 son para hacer el área: uno cuadrado, uno circular y el último para areas irregulares.

Escoges el que más te convenga y luego pones el enlaces.