Codigo Html

[monomonono]

Hola soy mas o menos nuevo, y para mi web me interesa usar la funcion "map" en html pero no sé como se usa, ví como lo hacia al ver el html pero no sé que puso en su stylesheet asi que no pude copiarlo, solo entendi las coordenada.

ya habia hecho un post parecido hace un tiempo pero nunka me respondieron si saben algo lo ponen por favor :D.

muchas gracias :)

[jorgens]

Primero insertas el código html de la imagen, con su ruta, claro, y le colocas al final del código usemap="#xxxxx" donde xxxxx lo eliges tu y será el nombre que le das al mapa de la imagen.

[img]objetos/imagen.gif[/img]

Seguidamente, en la línea siguiente, defines el mapa con sus distintas zonas. La definición del mapa empieza con esta lína:

<map name="mimapa">

y termina con esta otra:

</map>

Entre esas dos líneas defines cada una de las zonas del mapa. Cada una de esas zonas tendrá un enlace a una página diferente si lo deseas. Una zona se define así, por ejemplo, para un rectangulo se pone:

<!zona uno>
<area shape="rect" href="destino-uno.html" coords="140,20,280,60">

En shape se pone rect, de rectangulo y de las 4 ultimas cifras que ves, las doa primeras son las coordenadas del vertice de arriba a la izquierda (140,20) y las dos segundas las del vertice de abajo a la derecha (280,60).

Para definir un poligono de tres lados, haces lo mismo, pero en lugar de rect le pones poly y le das además 6 cifras. Cada par de cifras son las coordenadas horizontal y vertical de cada uno de los tres vertices.

<!zona dos>
<area shape="poly" href="destino-dos.html" coords="100,100,180,80,200,140">

Para definir un circulo, se pone circle en el shape. Las coordenadas a definir para un circulo serán las del centro (80,100) y el radio del mismo (60):

<!zona tres>
<area shape="circle" href="destino-tres.html" coords="80,100,60">
</map>

Dentro de la definicion del mapa, puedes poner todas las zonas que quieras. Así, si en una imagen tienes un rectangulo, un circulo y un triangulo y a cada uno le quieres asignar un enlace distinto, puedes poner algo así:

[img]objetos/imagen.gif[/img]
<map name="mimapa">
<!zona uno>
<area shape="rect" href="page.html" coords="140,20,280,60">
<!zona dos>
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<!zona tres>
<area shape="circle" href="new.html" coords="80,100,60">
</map>

Lo más complicado quizás sea saber las cifras que tienes que poner para cada zona. Cada una de estas cotas o dimensiones, están medidas desde la esquina superior izquierda si no recuerdo mal y se expresan en pixeles.

Ante cualquier duda ya sabes! Y perdona no haberte respondido antes, se me pasó este mensaje!

Lo que está en colores es lo que debes poner a tu gusto.

[monomonono]

muchas gracias jorgens :)

me gustó mucho tu página, yo seré otro más que estará atento a tus nuevos cursos.