Ver Mensaje Individual
  #7 (permalink)  
Antiguo 03/02/2012, 08:39
furoya
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 6 meses
Puntos: 317
Respuesta: Cortar una imagen en varias para hacer Hipervinculos

2005 ... 2012 ...

Vamos a hacer un ranking de temas resucitados después de años. A ver quién gana.

Hola paravolveracreer, bienvenido.
Seguro llegaste acá con un buscador. Está muy bien, generalmente el Foro no alienta que levantemos temas tan viejos, pero yo sigo insistiendo en que es mejor que abrir 1000 temas preguntando lo mismo. En tu caso, no es reprobable para nada.

Si no entiendo mal, no eres diseñador ni programador, sólo tienes un blog y quieres mejorarlo un poco con efectos.

El uso de mapas clickeables es muy práctico, una vez que entiendes cómo se hacen es rápido, seguro y compatible. Se pueden usar en otros elementos que no sean imágenes, pero si tienes los nombres (y no las caras) en un *.jpg, *.png ó *.gif, está bien.

Arriba hay varios ejemplos de cómo se hacen, pero si no entiendes de código fuente vas a necesitar un poco de ayuda. Igual te dejo otros dos tutoriales externos —en español— para que estudies más tarde.

http://html.hazunaweb.com/112.php

http://www.psicobyte.com/html/curso/html5.html

Bien, el punto principal es qué blog estás usando. Seguramente cuando creas una nueva entrada te abres un editor provisto por el sitio, que puede ser WYSIWYG y entonces tienes una barra de edición y formato, y un espacio donde ves en tiempo real cómo aparecerán los cambios al subir el documento.
Si no tiene un botón para hacer mapeado, ése no te sirve.

Hay una versión que no muestra el resultado final sino el código fuente. Tiene los mismos botones, pero en el panel aparecen las etiquetas de formato con el texto. Si puedes estudiar los editores de este Foro, vas a ver que el de "Texto" te permite (por ejemplo) seleccionar una palabra para que esté en negrita, y al hacer un click en el botón de "Bold" te la rodea en el código con las etiquetas y . Esas tags le indican al navegador que tiene que poner el texto que está en el medio en negrita. (En realidad, hay un paso intermedio, pero por ahora no nos vamos a complicar).
Una tercera opción es no usar los botones del editor, y simplemente escribir con el teclado esas mismas etiquetas al tipear el texto. Los que hacemos páginas web usamos mucho ese método. De hecho, este mensaje (y los otros que posteo) lo escribo así, en un Notepad antes de ir al Foro y lo pego en el editor, ya hecho.

Y éste es el método que vas a tener que usar en tu blog. Porque doy por seguro que no tiene la barra de "Map", "Shape", "Area" ... pero sí debe aceptar HTML; así que con escribirlo en el formulario, al enviar la página tiene que aparecer tu imagen mapeada.

Yo te recomendaría que primero hicieses una maqueta fuera del blog. Puedes subir la imagen a cualquier servicio de hosting de imágenes (yo uso ImageShack, pero ... no sé si recomendarlo; además hay que registrarse sí o sí para que puedas usar tu imagen en un blog que no esté en su lista de "autorizados").

Luego haces una maqueta de página en el Block de Notas, o cualquier editor de texto simple, y lo guardas como "mi Ejemplo.htm" (no como "miEjemplo.txt").

Tendría que ser algo como ésto

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MAPAS Y ÁREAS CIRCULARES Y RECTANGULARES SOBRE IMAGEN.</title>
<style type="text/css">
body {margin : 0; padding : 0;}
</style>
</head>
<body>


<img src="http://img140.imageshack.us/img140/3820/horaciozabala.jpg" 
alt="obra de Horacio Zabala." 
style="width: 640px; /* ANCHO DE LA IMAGEN */
height: 480px; /* ALTO DE LA IMAGEN */ 
border: none; /* SIN BORDE VISIBLE */ " 
usemap="#mapaBase">

<map name="mapaBase">

<area 
shape="circle" /* ÁREA CIRCULAR */ 

coords="460,250,160" 
/* "DESDE IZQ. DE IMAGEN HASTA CENTRO DEL CÍRCULO,
DESDE ARR. HASTA CENTRO DEL CÍRCULO,
RADIO DEL CÍRCULO." 
(TODAS MEDIDAS EN PIXELES) */

href="http://imageshack.us/photo/my-images/820/relojvillalongafurlongm.jpg/" /* DIRECCIÓN DE SU ENLACE */ 
alt="Click aquí para ver un reloj redondo en el Museo de la Ciudad de Buenos Aires.">

<area 
shape="rect" /* ÁREA RECTANGULAR */ 

coords="60,150,225,320" 
/* "DESDE IZQ. DE IMAGEN HASTA BORDE IZQ. DEL CUADRADO,
DESDE ARR. HASTA BORDE SUP.,
DESDE IZQ. DE IMAGEN HASTA BORDE DER. DEL CUADRADO,
DESDE ARR. HASTA BORDE INF." 
(TODAS MEDIDAS EN PIXELES) */ 

href="http://imageshack.us/photo/my-images/411/maraesthergalera.jpg/" /* DIRECCIÓN DE SU ENLACE */ 
alt="Click aquí para ver una diapositiva cuadrada, obra de María Esther Galera.">

</map>

</body>
</html>
Por supuesto, cada vez que tengas que editar o modificar esa prueba, al hacerle click al ícono del archivo te lo va a abrir con tu navegador predeterminado. Para que te lo abra con el Block de Notas y seguir experimentando vas a tener que clickear con el botón secundario (generalmente el derecho) y usar la opción "Abrir con ..." + "Block de notas", o el editor que más te guste o que tenga tu sistema operativo (estoy suponiendo que usas Windows, no sé por qué).

Si subes alguna imagen y nos marcas cuáles son las áres a clickear seguramente alguien te va a ayudar con el asunto de las coordenadas, es lo más difícil para quien recién empieza. Porque o lo vas probando a "ojímetro" o usas alguna herramienta que te las marque.

Va a ser complicado, pero te dejo algún enlace más, como para que mires; no espero que los entiendas de una, apenas los veas.

Última recomendación, por ahora : si te parece que toda esta explicación es muy difícil ... la lees de nuevo. A la cuarta o quinta te va a empezar a quedar más clara, el asunto es no abandonar, porque lo que no explico —algo tan elemental como convertir estos ejemplos de código que dejamos en el Foro a documento "visible" en cualquier navegador— es una cosa que puedes deducir y razonar con la información de que dispones. Quizá tengas algún drama al guardarlos con el Notepad, porque antes hay que sacarle el Ajuste de Línea y después hay que elegir un modo para guardarlo (creo que era "Tipo : Todos los archivos" ; "Codificación : UTF-8"), pero son cosas que tiene que ver con el manejo de los programas que uses.

Suerte y voluntad, que no es tan complicado.







http://imageshack.us/


[edit]

Me había olvidado de los otros enlaces. Te dejo éste :

Aplicar filtro o similar sobre un elemento SHAPE de una imagen

Hay algún ejemplo de mapas con eventos y una simulación de áreas actvables hecha con JS. También una herramienta (borrador) para generar las coordenadas y un enlace a una herramienta (hecha por alguien que sabe) más completa y en línea.

[/edit]

Última edición por furoya; 04/02/2012 a las 05:13 Razón: Cada vez ando peor de la memoria.