[HTML] [DW] Mapa de Imagen - εїз ~ αn¡мε γ мαѕ ~ εїз

Como estan? :D En este tutorial les enseñare a crear mapas de imágen! sin mas preámbulos empecemos:

1.- Lo primero que necesitaremos es el Dreamweaver (yo tengo el CS6) y Photoshop, ahora lo que tienes que hacer es crear la imagen con el diseño que querramos yo usare la siguiente imagen, que como pueden ver le hice los botones, asi que ahi iran los links:

2.- Lo segundo que tienes que hacer es hacer tu diseño normal, si el mapa esta colocado en un layout, armalo normal en tu sección, aun sin el link, una vez este acomodado, copias el link de la imagen. Yo por ejemplo subi mi imagen a imgur.com y de ahi copio el link:

3.- Abrimos el DW y ponemos "Nuevo" "Documento HTML". Nos saldrá el nuevo documento pero en "Código" saldrá un codigo HTML, borralo! no nos sirve.

4.- Una vez borres ese codigo, te vas a Insertar > Imagen. Y te saldrá la siguiente ventana, inserta la URL de la imagen en la que colocaremos el link:

5.- Una vez la hayas insertado podrás verla asi en Código y en Diseño (quedate en la pestaña diseño por ahora):

6.- Ahora aqui vamos a ponerle los links, fijate que abajo salen estas herramientas (seleccionando la imagen claro), y yo voy a usar la cuadrada:

7.- Realiza el primer rectángulo donde quieres el primer link:

8.- Repite los pasos en todos los links que quieras "dibujar" en tu imagen. Una vez hayas terminado, te vas a la pestaña "Código" y te saldrá algo parecido a esto:

9.- Ahora copia todo ese código y ve a tu sección donde pusiste la imagen antes. y reemplazas este codigo, por todo lo q copiaste del Dreamweaver:

10.- El código te quedará así:

11.- Una vez hayas terminado solo guarda la sección y LISTO! ya esta tu mapa de imagen ;)

Déjame tu comentario y si pudiste hacer alguna prueba enseñamelo :D Si talvez algo no entendiste puedes preguntar :)

Si eres miembro del club Majestic y mandas una muestra aqui ganas 10 GP

Para volver a los tutoriales click aqui