Como poner LINKS en zonas de imagenes

[soloandroid]

Hola, alguien sabria decirme como podria enlazar ZONAS de una imagen ( no la imagen entera ) con otras paginas ?

Lo he probado con dream weaver una opcion que puedo elegir una zona de imagen y en codigo queda asi : <area shape="rect" coords="347,302,378,325" href="pagina2.htm">

El problema que tiene esque si se ve en movil no tiene nada que ver la zona donde se clickea con el link, existe algo para esto ? gracias

[Alexis88]

¿Te refieres a la parte de la página en donde hayan imágenes? Pues sería más fácil si las imágenes estuvieran en un contenedor el cual tenga un Id y luego solo tendrías que añadir el respectivo ancla en el enlace desde el cual quieres dirigirte.

Archivo de partida:

Código HTML:

<a href = "ejemplo.html#imagenes">Enlace</a>
 

Archivo de llegada:

Código HTML:

<section id = "imagenes">
    <img src = "imagen1.jpg" />
    <img src = "imagen2.jpg" />
    <img src = "imagen3.jpg" />
</section>
 

Cuando le des un clic al enlace, se hará la redirección hacia la página de destino y se realizará un desplazamiento vertical hasta coincidir con el inicio del bloque cuyo Id se añadió como ancla en el enlace.

Saludos

[PHPeros]

Él se refiere a la etiqueta <map> y sus respectivos <area> que representan las figuras en forma de link con sus coordenadas correspondientes, para luego ser añadidos a la imagen que se desee mediante el atributo usemap.

[Alexis88]

Ahora que he podido dormir y hacer una sola cosa a la vez, me doy cuenta de eso.

[Rafael]

Hum. Hace poquito alguien comentaba un problema similar. La cosa es que en un móvil se reescala la imagen, pero no el area map, por lo que había que meter un script para que el area map también se reescalara.

[javier0730]

Que tal soloandroid

Quizás te sirva esto: http://www.html-map.com/ es una página en la que colocas la URL de la imagen y posteriormente te permite seleccionar un área de esa imagen y colocarle un link y después elijes otra área y pones otro link, así sucesivamente, una vez que terminaste, automáticamente te generá el código html y css para que lo pongas dentro del body de tu página. A mi me ha funcionado, aunque nunca lo he probado en celulares o tabletas.

Saludos.

[KATHYU]

Iniciado por javier0730

Que tal soloandroid

Quizás te sirva esto: http://www.html-map.com/ es una página en la que colocas la URL de la imagen y posteriormente te permite seleccionar un área de esa imagen y colocarle un link y después elijes otra área y pones otro link, así sucesivamente, una vez que terminaste, automáticamente te generá el código html y css para que lo pongas dentro del body de tu página. A mi me ha funcionado, aunque nunca lo he probado en celulares o tabletas.

Saludos.

Que buena herramienta

[caricatos]

Hola:

Me extraña que no se reescalen los mapas, pero de ser así, una buena alternativa serían las imágenes svg, tal vez incrustada en la página (con un tag svg), los area shape polygon se equivalen al tag svg polygon, y las coors son el atributo points (con los mismos datos/coordenadas)... los recuadros y círculos también existen, y pueden ponerse tags "a" (enlaces)...Mapas interactivos svg.

Saludos

[KATHYU]

Iniciado por caricatos

Hola:

Me extraña que no se reescalen los mapas, pero de ser así, una buena alternativa serían las imágenes svg, tal vez incrustada en la página (con un tag svg), los area shape polygon se equivalen al tag svg polygon, y las coors son el atributo points (con los mismos datos/coordenadas)... los recuadros y círculos también existen, y pueden ponerse tags "a" (enlaces)...Mapas interactivos svg.

Saludos

Caricatos le envie MP por una duda de un calendario que usted hizo hace algun tiempo pero al ver su firma no se si debo hacer un tema o que

[pzin]

Iniciado por KATHYU

Caricatos le envie MP por una duda de un calendario que usted hizo hace algun tiempo pero al ver su firma no se si debo hacer un tema o que

Pues yo veo bastante claro que no deja lugar a dudas.

[caricatos]

Hola:

Iniciado por KATHYU

... no se si debo hacer un tema o que

Es lo mejor...

Además, la participación de otros usuario seguro que enriquecerá el resultado final

Saludos

[KATHYU]

Iniciado por caricatos

Hola:



Es lo mejor...

Además, la participación de otros usuario seguro que enriquecerá el resultado final

Saludos

ok asi lo hare mañana

[Italico76]

Por favor no usen imagenes SVG, no son "accesibles" :

Wikipedia las usa y jamas pude ver una sola formula matematica porque cuando cambio los CSS del sitio por un problema visual a fondo negro... cambia todo pero no el color de los grafos de los SVG y no se entiende nada!

[caricatos]

Hola:

Iniciado por Italico76

Por favor no usen imagenes SVG, no son "accesibles"...

Explícate mejor... yo he apostado por ese formato, y eso de cambiar un css me suena a querer "joder" (con mis mayores respetos)...

Sobre la accesibilidad... evidentemente es mucho mejor que canvas, porque al menos no depende de javascript (aunque se puede usar)

Ya que haces esa afirmación, propón una alternativa.

Saludos

[Rafael]

cambia todo pero no el color de los grafos de los SVG y no se entiende nada!

Probablemente habeía que modificar un poco tu css local con alguna regla para los divs que contengan svg...

Un punto interesante... Aunque yo de teoría siempre he tenido en mente algun problema visual, hasta que te topas con personas que directamente necesitan algo específico no profundizas en el tema.

[Italico76]

@Rafael : gracias en interesarte en la problematica, utilizo Chrome en primera instancia porque me resulta mas facil de configurar un browser basado en Webkit.

En Chrome uso la extension de Chrome change colors ya que me permite cambiar de una vez todo lo que veo en la web y me permite manejar excepeciones (excluir pagina o dominio del cambio de css)



Hay otra extension que uso para cuando Change Colors no me es efectiva, aplico la excepcion a esta primera y uso entonces la extension userStyles (Stylish) pero con ninguna he tenido mucha suerte con Wikipedia......


EDIT: encontre una theme de Stylish que lo resuelve y hasta otra mas pero no se que opine @caricatos de los problemas que he tenido y si se puede considerar "accesible" al formato SVG (?)


PD: hace un tiempo me la pase buscando esos themes y no los habia

[caricatos]

Hola:

Iniciado por Italico76

...no se que opine @caricatos de los problemas que he tenido y si se puede considerar "accesible" al formato SVG (?) ...

No termino de entender el problema de la accesibilidad... si pones un fondo negro en un texto negro, seguro que no se va a ver nada, lo mismo si es una imagen con fondo transparente y contenido en negro... o fondo rojo con texto rojo... si cambias un fondo sería conveniente modeificar el color principal, pero si hablamos de svg, ni los elementos tienen su fondo con el estilo background-color (fill), ni las letras son el estilo color (stroke)... ni su grosor es la misma propiedad...

Hace poco también empecé a retocar un svg de la wikipedia, buscando sus elementos y mostrándolos con "fill"; y resulta que el último elemento era una caja que abarcaba todo el dibujo, y claro, tapaba el resto del dibujo... La referencia (está calentita): SVG vs. Ajax .

Saludos

[Italico76]

@caricatos : el texto no era negro........ solo afecto a los SVG... ni idea como lo resuelven esos themas de Stylish pero es con css tambien ..

Hace poco también empecé a retocar un svg de la wikipedia, buscando sus elementos y mostrándolos con "fill"; y resulta que el último elemento era una caja que abarcaba todo el dibujo, y claro, tapaba el resto del dibujo

Quizas por lo mismo

[Rafael]

El tema es un poco más profundo de lo que parece. Desconozco cómo se prepara un css parar un svg, pero habría que hacer algo parecido a la estructura de un html para poder fdormatear cosas importantes del fondo...

Lo estudiaré con más calma.

[caricatos]

Hola:

Iniciado por Rafael

... Desconozco cómo se prepara un css parar un svg, pero habría que hacer algo parecido a la estructura de un html para poder fdormatear cosas importantes del fondo...

Dentro de un svg se puede poner una hoja de estilos al igual que en cualquier página, lo mismo que se pueden insertar enlaces, pero no debemos olvidarnos que se trata de gráficos, incluso los textos que se inserten en ellos, así que lod estilos más importantes son con nombre igual al atributo correspondiente: fill, stroke, stroke-width... y lo que en este tema importa... la "s" de svg se refiere a "scalable", y por eso creo que para este propósito puede interesar.



Esta imagen seguro que en un móvil es igual que en esta página... con enlaces también...

Saludos