Colorear imagen mapeada

[Wox17]

Wenas,

he estado googleando pero no he sabido encontrar lo que estoy buscando.

Necesito asignar un color a una imagen mapeada (usando map)

Os pongo un ejemplo:

Tengo una imagen con 3 zonas (3 area shape) y dependiendo de una condición una zona será de color verde o rojo. Por lo que puede ser que la misma imagen tenga las 3 zonas verdes, o tenga 1 zona verde y 2 rojas,etc...

Alguna solución?

Muchas gracias!

[maycolalvarez]

http://archive.plugins.jquery.com/project/maphilight

demo: http://davidlynch.org/projects/maphi.../demo_usa.html

asegúrate de utilizar la versión de jQuery recomendada, debido a que no esta soportado en la última

[Wox17]

Gracias por la respuesta pero no necesito que al pasar por encima me cambie de color. Os pongo más detalles de qué es lo que quiero:

Imaginemos un desplegable por años. Donde podemos escoger entre varios años, del 2005 al 2012, por ejemplo. Internamente esto tiene una variable--> v_Año.

Por otro lado tengo la imagen que os comento antes. Si el año escogido es 2012 las 3 zonas estaran de color verde, si es 2011, la primera y la segunda seran verdes y la tercera roja. (Es un ejemplo).

De esta manera aunque pasemos el mouse por encima no cambiara nada y las zonas de la imagen cambiaran dependiendo del año seleccionado.

Como puedo hacer esto?

Un saludo!

[caricatos]

Hola:

El efecto mouseover no tienes que aplicarlo, pero si puedes aplicar distintos colores a las áreas.

En este apunte: Mapa de España explico como funciona eso del efecto, pero también como consigo las áreas de colores... basta con tener todas las imágenes con sus colores y el resto transparente y simplemente superponerlas...

Sabiendo las coordenadas de las áreas, puedes crearte fácilmente esas imágenes con las librerías GD de php (lo explico en el apunte).

Saludos

[Wox17]

Gracias caricatos, pero esto lo tengo que aplicar en un programa secundario el cual solo reconoce html y javascript. Tiene que ser un codigo sencillo y todo en un mismo archivo.

Simplemente quiero que un mapa se coloree con un color u otro dependiendo de una variable que tb estaria en el codigo. Creo que la idea se entiende pero el hacerlo debe ser muy complicado con HTML.

Si tienes alguna idea o como colorear el area shape de un map me comentas.

Muchas gracias

[caricatos]

Hola:

Mira la imágen de abajo de esta página: Áreas poligonales para efecto rollover, cada figura es una imagen distinta, y están superpuestas... Si sabes cambiarle los parámetros, tienes casi todo listo.

Saludos

[furoya]

Hola todos

Iniciado por Wox17

he estado googleando pero no he sabido encontrar lo que estoy buscando.

Es que estuviste buscando algo imposible. No entiendo cómo siempre aparece alguien haciendo esta pregunta. Si es evidente que un área no es un elemento, ni un objeto. No se puede "colorear".
Lo que se puede, como te están mostrando, es superponer capas con la misma forma.

Aprovecho y te dejo un enlace más.

Cambiar de color un <area> en un mapa de imagen?

Saludos
furoya

[Wox17]

Gracias por las respuestas.

He estado viendo el link de caricatos y como comentais creo que puedo lograr lo que necesito. No tengo conocimientos de PHP, pero si os pongo el codigo y me ayudais a superponer la imagen quizá ya pueda seguir yo.

Como veréis es muy simple:

<table>
<tr>
<td>
<img src=imagentest.jpg width="389" height="333" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="7,4,196,158" alt="Zona 1"</map>
</td>
</tr>
</table>

A partir de aquí necesito superponer en esa area un mismo rectangulo, el color verde o rojo dependiendo de una variable.

Muchas gracias

[furoya]

Disculpa, Wox17, pero cuando hablaste de shape todos supusimos que te referías a áreas poligonales. De hecho, el impresionante ejemplo de caricatos se justifica por eso. Si tienes que destacar rectángulos no necesitas generar nada en un servidor, ni siquiera necesitas imágenes para superponer (aunque puedes usarlas y quizá hasta quede mejor), y si tu sitio acepta HTML y JS, también debe aceptar CSS; digo, porque casi se puede hacer sólo con CSS. El problema sería la "variable", pero algo se puede inventar.

Mira, ya que estamos aquí, te dejo un ejemplo, que ni siquiera usa area, porque tampoco es indispensable. Deberías haber detallado mejor lo que precisabas en vez de proponer una solución que claramente no dominas.

Eso de la variable para cambiar entre "rojo" y "verde" lo manejas desde un mensaje de confirmación en cada "ventanita". En tu página no tengo idea de cómo será, porque tampoco pusiste eso en el ejemplo.
Al menos averiguamos que metiste todo en una tabla. En fin, peor es nada.

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>CAMBIA COLOR DE UN SECTOR RECTANGULAR (DESTACA PARTE DE IMAGEN).</title>
<script type="text/javascript">

function elige(T) {

T.style.backgroundColor = "";

var miColor = T.className;

var pregunta = confirm("¿Cambiar la ventana \""+ miColor +"\"?"); 

if (pregunta) {
T.className = (miColor == "red") ? "green" : "red";
}

T.title = T.className;

}

</script>
<style type="text/css">
.green {background-color: green; }

.red {background-color: red; }

div {cursor: pointer;}
</style>
</head>
<body>
<h2>Cambia el color de partes destacadas con capas rectangulares "rojas" o "verdes" en una 
imagen de fondo.</h2>

<table title="Lux Lindner." border=0 cellpadding=0 cellspacing=0 style="background-image: 
url('http://img684.imageshack.us/img684/9161/luxlindner.jpg'); position: relative; border-collapse: collapse; " ><tbody>
<tr>
<td style="position: relative; width: 480px; height: 640px; ">

<div onclick=elige(this) class=red style="width:49px; height:64px; position: absolute; 
top: 195px; left: 92px; opacity:.5; " title="red"></div>

<div onclick=elige(this) class=green style="width:49px; height:64px; position: absolute; 
top: 195px; left: 168px; opacity:.5; " title="green"></div>

<div onclick=elige(this) class=red style="width:49px; height:64px; position: absolute; 
top: 195px; left: 251px; opacity:.5; " title="red"></div>

<div onclick=elige(this) class=green style="width:49px; height:75px; position: absolute; 
top: 315px; left: 94px; opacity:.5; " title="green"></div>

<div onclick=elige(this) class=red style="width:49px; height:75px; position: absolute; 
top: 315px; left: 167px; opacity:.5; " title="red"></div>

<div onclick=elige(this) class=green style="width:49px; height:79px; position: absolute; 
top: 315px; left: 245px; opacity:.5; " title="green"></div>

</td>
</tr>
</tbody></table>

</body>
</html>

No le puse el filtro para IE, así que no se va a ver bien en versiones por debajo de la 9. Igual se entiende. Y si hace falta se le agrega, la forma está en cualquier tutorial.

◙

[Wox17]

Gracias Furoya por tu respuesta. Te comento:

A continuación te pongo el trozo del codigo que de momento estoy utilizando. Con esto he conseguido ver mi imagen y dos recuadros verde y rojo. Aunque ahora salen los dos a la vez. Me falta el paso de la variable. No necesito hacer la función del principio pidiendo la variable, sino que en la pantalla hay un selector de años con una variable definida-> v_año. Si el usuario coge el año 2012 en el selector, debería aparecer toda la imagen con la primera area, la Roja (solo viendo la imagen con el area roja) y si escoge 2011 el area verde.

El selector tiene definida la variable como: @{v_año}

Imagino que tengo que cambiar "onclick=elige(this)" de las dos areas definidas por la variable...pero no sé como hacerlo.

</script>
<style type="text/css">
.green {background-color: green; }

.red {background-color: red; }

div {cursor: pointer;}
</style>
</head>
<body>
<h2>Cambia el color de partes destacadas con capas rectangulares "rojas" o "verdes" en una
imagen de fondo.</h2>

<table title="Test" border=0 cellpadding=0 cellspacing=0 style="background-image:
url('../imagentest.jpg'); position: relative; border-collapse: collapse; " ><tbody>
<tr>
<td style="position: relative; width: 389px; height: 333px; ">

<div onclick=elige(this) class=red style="width:192px; height:156px; position: absolute;
top: 3px; left: 5px; opacity:.5; " title="red"></div>

<div onclick=elige(this) class=green style="width:186px; height:156px; position: absolute;
top: 3px; left: 197px; opacity:.5; " title="green"></div>

</td>
</tr>
</tbody></table>

</body>
</html>



Muchas gracias por tu tiempo

[furoya]

De nada, Wox17.

Voy a tratar de expresarme bien, porque después dicen que grito como cuando me cobran un penal inventado.

Tengo la impresión de que no solamente andas flojo en el tema de diseño, sino que a pesar de usar AJAX tampoco entiendes de javascript. Lo que me lleva a la conclusión de que encontraste algún código que creíste que te serviría, lo copiaste y lo pegaste. Pero como no se ajusta del todo, ahora pretendes que te lo arreglemos.
Porque ya es evidente para todos que solo no lo vas a poder hacer.

Por lo general lo que tratamos aquí es de ayudar a que otros desarrolladores (novatos o no tanto) encuentren alguna salida a su problema. Que debería ser un problema complicado, o extraño, o al menos con una solución que exija algo más que conocimiento. La mayoría de las veces hay que usar el ingenio.

Y esas respuestas deben servir de ejemplo para el resto de la comunidad, porque aquí vienen montones de estudiantes (y estudiosos) a aprender de las guías que posteamos. Serían una especie de "ejercicios prácticos".

Pero para entenderlas, al menos hay que saber lo más básico. Que no es tu caso.
O plantear el asunto de una manera clara, inequívoca, como para no tener que dar explicaciones después y que ahí se note la falta de conocimientos. Que tampoco fue tu caso.
O por lo menos demostrar alguna voluntad de aprender o colaborar con la respuesta; ya teniendo un comienzo, es fácil explicar más claramente qué es lo que se busca. Y si no se sabe explicar, siempre conviene poner un ejemplo.
Que tampoco fue tu caso.
Porque ése último código es una vegüenza. Al margen de que te olvidaste de las etiquetas [CODE] [/CODE] (en mi caso, las prefiero al las de "highlight", a quienes odio profundamente), sino que sabiendo que tu drama ya no es la superposición de una capa sino la interpretación de un valor de variable ... omitiste dejarnos todo el escript.

Te podría agregar que tampoco pusiste la imagen (algo que a veces ayuda a entender lo que nos piden), por no mencionar algunas incongruencias.
Como que empiezas hablando de 3 "zonas", y en el último código ya son 2.
O que nunca explicas la lógica para la elección de colores, lo que no permite crear un ejemplo práctico que ya no puedas discutir.

Si nos remitimos a los comienzos del tema, recordamos que querías colorear shape's, que chicaneaste con el mouseover (o de verdad no te habías dado cuenta?) y descubrimos "pretensiones explicativas" del tipo "lo tengo que aplicar en un programa secundario el cual solo reconoce html y javascript. Tiene que ser un codigo sencillo y todo en un mismo archivo ... que un mapa se coloree con un color u otro dependiendo de una variable que tb estaria en el codigo ... no tengo conocimientos de PHP, pero si os pongo el codigo y me ayudais a superponer la imagen quizá ya pueda seguir yo ... podemos escoger entre varios años, del 2005 al 2012 ... si el año escogido es 2012 las 3 zonas estaran de color verde, si es 2011, la primera y la segunda seran verdes y la tercera roja ... si el usuario coge el año 2012 en el selector, debería aparecer toda la imagen con la primera area, la Roja (solo viendo la imagen con el area roja) y si escoge 2011 el area verde ..."


No te imaginas la cantidad de sujetos con problemas de personalidad que andan por los foros preguntando güevadas y "obligando" a la comunidad a tratar de entenderlos durante una laaaarga cantidad de mensajes. A veces encuentran gente buenuda que les tiene paciencia, otras los cortan a los tres post, en otras, aparece alguien a darles un sermón. En sitios como éste, podemos aprovechar el tema para agregar alguna idea que sí aporte a la comunidad, sin que nos importe demasiado el desarrollo previo. Ventaja que tienen los foros "especializados", y que no siempre podemos usar en los foros "de amigos".

Por lo general se dan cuenta de que los "usamos", y al fin tratan de poner un último mensaje arruinando los aportes anteriores. Pero justo en FdW tienen costumbre de borrarlos y no permitir que vuelvan a postear.

Por eso debes tener cuidado cuendo vengas a escribir en un tema, para que no te confundan con uno de esos especímenes.



Volviendo al coloreo de las imágenes, si realmente hay una sola variable para manejar distintos formatos, hay que inventar algún método para "dividirla". El más obvio es meter todo en una misma cadena y cortarla de nuevo dentro de la función. No es la única, la de usar un binario, o un base 3 si son 3 colores, a mí me gusta más; y en tu caso los colores resulta que son 3 : rojo, verde y transparente. Y las combinaciones pueden ser varias (en este caso 3³), por lo que supongo que un "selector" debe ser un select con todas las opciones en forma de "años", o "jamones" (diría tunait), da lo mismo.

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>DESTACA PARTE DE IMAGEN.</title>

<style type="text/css">

table {position: relative; width: 480px; height: 640px; border-collapse: colllapse; }

div {position: absolute; top: 55px; left: 85px; background-color: blue; 
width: 175px; height: 470px; margin: 0; }

h3 {text-align: center; }

img {width: 480px; height: 640px; margin: 0; }

#bravo {top: 55px; left: 265px; }

</style>
</head>
<body>
<h2>Usa una variable para colorear <code>div</code>'s.</h2>

<table border=0><tbody>
<tr>
<td id=marco title="Duilio Pierri.">

<img src=http://img443.imageshack.us/img443/1534/duiliopierri.jpg >

<div id=alfa ></div>
<div id=bravo ></div>

<img style="opacity: 0.5; filter:alpha(opacity=50); margin-top: -640px; " src=http://img443.imageshack.us/img443/1534/duiliopierri.jpg >
</td><td>

<h3>Cambia destacado :</h3>

<select onchange="repinta(this.value)">
<option value="transparent-transparent"> Izquierdo ► &nbsp; × &nbsp; | * * × * * ◄ Derecho </option>
<option value="transparent-red"> Izquierdo ► * * × * * | Rojo ◄ Derecho </option>
<option value="red-red"> Izquierdo ► Rojo | Rojo ► Derecho </option>
<option value="red-transparent"> Izquierdo ► Rojo | * * × * * ◄ Derecho </option>
<option value="transparent-green"> Izquierdo ► * * × * * | Verde ◄ Derecho </option>
<option value="green-green"> Izquierdo ► Verde | Verde ► Derecho </option>
<option value="green-transparent"> Izquierdo ► Verde | * * × * * ◄ Derecho </option>
<option value="red-green"> Izquierdo ► Rojo | Verde ◄ Derecho </option>
<option value="green-red"> Izquierdo ► Verde | Rojo ◄ Derecho </option>
</select>

</td>
</tr>
</tbody></table>


<script type="text/javascript">

function repinta(V) {

//alert("valor = \""+V+"\"")

var charly = V.split('-');

//alert("izq → \""+charly[0]+"\" ; der → \""+charly[1]+"\"")

document.getElementById("alfa").style.backgroundColor = charly[0];

document.getElementById("bravo").style.backgroundColor = charly[1];

}
</script>

</body>
</html>

Esta versión usa el ya mencionado método "sánguche", que acá no se aprovecha, pero en el caso de tener que ubicar eventos de ratón sobre una imagen donde empiezan a aparecer capas superpuestas, nos ahorra el drama de crear cancelaciones y duplicados de "clicks" o de "overs", usando ahora sí un mapeado.
El posicionamiento no se ve bien en versiones viejas de IE, pero se puede ajustar si es necesario.



Adiós Wox17!. Y ojalá con esto soluciones tu problema!




Imagen :


◙

[Wox17]

Muchas gracias Furoya por tomarte tu tiempo.

Como bien dices no tengo conocimientos de AJAX ni de Javascript, etc.. Y he cometido el error de exponer el tema y luego he ido cambiando el problema por querer minimizarlo para que fuera más fácil de entender.

Si te parece te voy a explicar exactamente lo que necesito y me gustaria que me dijeras si es posible hacerlo, por lo que intenta olvidar los posts anteriores y leete este por favor:

Lo que necesito es: Dado un mapa geografico (mundial, europa, eeuu, etc) ser capaz de colorear diferentes zonas del mapa dependiendo de un cruce de valores(variables).

Ejemplo:
Si el valor real - el valor presupuestado del 2011 enero de la zona sur es mayor a 0 entonces la zona "sur" del mapa será verde
Si el valor real - el valor presupuestado del 2011 mayo de la zona norte es mayor a 0 entonces la zona "norte" del mapa será verde
Si el valor real - el valor presupuestado del 2011 junio de la zona este es menor a 0 entonces la zona "este" del mapa será roja
Etc Etc Etc... El mapa puede tener bastantes zonas.

El programa que estoy utilizando es Oracle BI (es un software de Business Intelligence). Este software puede mostrar diferentes gráficos y tablas extrayendo valores de una base de datos. Tambien hay gráficos especiales como mapas pero se necesita un programa adicional "MapViewer" que no es compatible con mi base de datos.

La solución es "intentar" solucionar mi problema con HTML. Cuando se crean los informes en Oracle BI podemos escoger a parte de tablas y graficos un informe llamado "texto estático" el cual podemos poner el codigo HTML que queramos (todo junto, eso si. No puedo crear varios archivos, todo el código debería ir en el texto estático) y ahí es donde he intentado poner el código que me has ido enseñando.


Te adjunto una imagen para que veas lo que quiero hacer: http://imageshack.us/photo/my-images/12/mapzha.jpg/


Como verás en la imagen hay dos selectores: Año y Mes.
Dependiendo el año que sea y el mes que sea cada zona del mapa se verá de un color o de otro. Estos dos selectores tienen asignada su variable: Año= v_año y Mes= v_mes


Imagino que en el código HTML tendrá que aparecer la operación del ejemplo anterior: VALOR REAL- VALOR PRESUPUESTADO de (v_mes) y del año elegido (v_año)

No sé si lo he aclarado o lo he líado más. De todos modos si me puedes ayudar te lo agradecería.

Un saludo y muchas gracias