Cortar una imagen en varias para hacer Hipervinculos

[elfresno]

Que hay amigos
miren, visite esta web
http://coljuegos.com/
y al entrar, aparece una imagen que es fondo.png
y segun esto
hay
FLASH
HTML
y es la misma imagen pero tiene el hipervinculo, y yo k sepa, al poner un Hipoervinculo se Pone a TODA la imagen, no solo en un pedazo

como se hace esto??
Saludos

[Mickel]

MAP:
http://www.htmlhelp.com/reference/ht...ecial/map.html

[furoya]

Hola elfresno , Mickel :

antiguamente a los diseñadores les costaba hacer un mapa. Es más, cuando tuve que poner un ejemplo en el foro, obviamente ni me acordaba cómo era la sintaxis. Y se usaba tan poco que tuve que sacarla de un tutorial de ¡HTML 3! (con recomendaciones para 4). Es curioso. Pero después de aparecer algunos mensajes sobre el tema aquí, las imágenes con mapeo se me cruzaron mucho más seguido en la web. No estoy diciendo que sea gracias al foro. Pero no estaría de más comentárselo a los sponsors .

En el tema

Zoom en una imagen

dejé un enlace para una aplicación que corta las imágenes y las mete en una tabla. Pero la dirección cambió, así que pongo aquí la nueva

http://www.feldfunker.de/software/splitz.htm

Por supuesto, siempre es preferible tu opción, Mickel.

saludos

furoya

[elfresno]

Heey, ke bien!!
ya pude, mucha ayuda la de los 2
Salu2

[Mickel]

Iniciado por furoya

Hola elfresno , Mickel :

antiguamente a los diseñadores les costaba hacer un mapa. Es más, cuando tuve que poner un ejemplo en el foro, obviamente ni me acordaba cómo era la sintaxis. Y se usaba tan poco que tuve que sacarla de un tutorial de ¡HTML 3! (con recomendaciones para 4). Es curioso. Pero después de aparecer algunos mensajes sobre el tema aquí, las imágenes con mapeo se me cruzaron mucho más seguido en la web. No estoy diciendo que sea gracias al foro. Pero no estaría de más comentárselo a los sponsors .

En el tema

Zoom en una imagen

dejé un enlace para una aplicación que corta las imágenes y las mete en una tabla. Pero la dirección cambió, así que pongo aquí la nueva

http://www.feldfunker.de/software/splitz.htm

Por supuesto, siempre es preferible tu opción, Mickel.

saludos

furoya

Gracias furoya!

Efectivamente ya no he visto el uso de MAP desde hace años(literalmente). Imagino que las herramientas de diseño han avanzado tanto que ahora no es problema esto para el diseñador. Me parece que podria ser bueno rescatar el uso de MAP en lugar de tantas tablas. Dejame ver si es estandar a ver que podemos rescatar...

[paravolveracreer]

Hola a todos; tengo una pregunta que no es de diseño de páginas, sino de usuario final, en realidad. Quiero subir una imagen con varios links en ella, como lo que preguntaron aquí inicialmente, pero para colocarla en un blog. ¿Alguien sabe cómo puedo hacerlo? En este caso, es el organigrama de una empresa y, al hacer click sobre el nombre de un funcionario, que siga el link correspondiente. Caso que no sea posible hacer esto, alguno sabe de un hosting gratis donde pueda poner una imagen con esas características? Les agradecería mucho su colaboración.

Sergio

[furoya]

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]

[alex_dh]

armas el menu todo junto, luego lo cortas con cualquier editor de imagen, separando las diferentes secciones a las cuales tiene tu menu...

[furoya]

En primer lugar no sabemos si es un menú. Puede ser un diseño más complejo que "rectángulo tras rectángulo".

En segundo lugar, no se corta con cualquier editor. De última, sí, pero hay editores que se usan para eso porque la combinación de áreas puede ser compleja para medir y que no se pisen unas a otras.

En tercer lugar, para volver a "armarlo todo junto" hay que hacer un difícil trabajo de ensamble; a menos que uses las tablas, que los editores antes mencionados te proveen al finalizar los cortes : te dan todo el código fuente, con las medidas puestas y la rutas de imágenes puestas.

En cuarto lugar, lo de cortar y rejuntar imágenes no sólo ya no se usa sino que es un trabajo que no tiene sentido existiendo el mapeado; que es estándar, y reconocido por la semántica de cualquier programa.

En quinto lugar, si se resucita un tema tan viejo, lo menos que debemos hacer es esmerarnos un poquito en la respuesta : una línea para no aportar nada nuevo y que no se haya dicho en estos mismos temas no se justifica y pone en riesgo de cierre el tema.

En sexto lugar, ... y menos se justifica si la respuesta anterior está llena de detalles y hasta con un código de ejemplo (y no lo digo porque la haya puesto yo, da lo mismo que la escriba cualquiera de nosotros).

En séptimo lugar, con estos antecedentes, no estoy seguro de que merezcas Karma (hoy "Valoración") "+".

En octav ... Bah, ya está. No se puede ser tan desubicado en un párrafo de 23 palabras. Si hacemos otro ranking para eso, te aviso porque seguro vas al podio.