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 ► × | * * × * * ◄ 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 :
◙