Como mapear una imagen en dreamweaver

Como mapear una imagen en dreamweaver

Mapear una imagen es una buena opción para insertar varios enlaces de una forma grafica y rápida. Con ello podemos incluir varios enlaces desde diferentes partes de una misma imagen, con lo que si podemos, ganaremos tiempo y espacio, ahorrándonos tener que insertar varias imágenes.

Para explicar como hacer esto, hemos cogido este mapa de las islas canarias, en el cual, vamos a enlazar cada una de ellas a su página correspondiente. Además si dejamos el ratón encima de cualquiera de ellas veremos como tiene que aparecer el nombre de la misma para saber sobre cual estamos.


Esta es la Imagen que hemos cogido:

Mapear una imagen

Para ello, insertamos la imagen como lo haríamos normalmente, es decir, una vez incluida en el directorio donde tenemos creado nuestro sitio, damos control+alt+I y la elegimos o bien vamos a Insertar / Imagen.

Una vez que la tenemos insertada, pinchamos sobre ella, vamos al panel Propiedades de nuestro dreamweaver,  en el, veremos las herramientas de mapa, con las que vamos a poder seleccionar cada parte de la foto que queramos linkear.

Propiedades Mapear una imagen dreamweaver

Para ello, seleccionamos cualquiera de las 3 herramientas que más nos venga en cuenta, en este caso la zona poligonal, y vamos haciendo clic alrededor de la isla como vemos en esta imagen:

mapeando una imagen en dreamweaver

Una vez completada la zona que queremos linkear, damos al icono del puntero del panel de propiedades Puntero, y podremos poner la pagina a enlazar en el campo de Vinculo, además de ponerle el nombre alternativo (el que queramos que le salga al usuario cuando pasemos el ratón por encima), todo esto en el mismo panel de propiedades de nuestro dreamweaver.

También es importante saber, por si queremos ser mas precisos, que podemos ayudarnos del zoom, el cual podremos verlo encima de la barra de propiedades, podemos poner un zoom mayor para ir seleccionando la zona y después volver a ponerlo al 100% para ver como quedaría la imagen completa.

zoom en dreamweaver

Aquí vemos una página en la que podemos observar el resultado final, en el cual, si dejamos el ratón en cada isla, veremos como sale su nombre, y si pinchamos en cualquiera de ellas nos llevara a su propia pagina.

Dentro de:
Siguiente:
Atras:

 

Si tienes alguna duda sobre este tutorial o necesitas algun tipo de material dejalo en el foro de nuestra web.

Ir a la pagina principal

Copyright Tutoriales Original Design - Privacidad