Foros del Web » Programando para Internet » Javascript »

mapas y rollover

Estas en el tema de mapas y rollover en el foro de Javascript en Foros del Web. Hola: Hice una página de prueba que con un area de un mapa sustituye la imagen de fondo por otra con la silueta del area... ...
  #1 (permalink)  
Antiguo 03/01/2006, 17:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
mapas y rollover

Hola:

Hice una página de prueba que con un area de un mapa sustituye la imagen de fondo por otra con la silueta del area... en realidad la imagen no la sustituye, sino la muestra (estaba "invisible" anteriormente)...

Luego, la nueva imagen también tiene su mapa que al salir del foco (onmouseout) se vuelve a esconder...

Para muestra... http://www.pepemolina.com/mapas/prueba.html

Estaba pensando en otro efecto, y es "opacar" la imagen mientras esté el ratón en ella, así las areas seleccionadas resaltan más...

Para opacar la imagen no quiero usar filtros por razones de compatibilidad, así que tengo otra imagen de sustitución (creada con php - imagecopymerge -)

El poblema es que al hacer mouseover sobre la imagen, la sustitución se hace bien, pero para restituirla, con mouseout se cambia cuando paso el ratón por un area caliente...

Se puede ver aquí: http://www.pepemolina.com/mapas/prueba2.html
Me gustaría que la imagen fuese la original al sacar el ratón de la imagen

Saludos y gracias
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #2 (permalink)  
Antiguo 04/01/2006, 12:42
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Hola caricatos :

Hace muy poco actualicé un tema con algo parecido.

Aplicar filtro o similar sobre un elemento SHAPE de una imagen

No puedo ver tus enlaces y no estoy seguro de cómo viene tu problema. Intuyo que lo de cambio de "foco" con el ratón tiene que ver con que los usas en el mismo elemento, en vez de poner el mouseover sobre el área 'activa' y quizá otro mouseover en el área 'sobrante' (ahora no me acuerdo cómo se marca ese 'área de afuera', pero debe estar en algún tutorial).

Estoy usando un IE, pero no creo que el error al ver tus páginas se deba a eso, ¿los podrías revisar? me interesa el asunto.


saludos
  #3 (permalink)  
Antiguo 04/01/2006, 13:13
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola furoya:

¿Qué tal las fiestas?... yo al menos brindé un montón ,y no hablo de esos brindis virtuales que posteamos a menudo...

Ultimamente creo que todos ven las páginas que subo igual que yo, y por eso me despreocupo algo...

Te pongo el código:

Código:
<html>
<head>
<script>
function mostrar(que) {
	document.images[que].style.visibility = "visible";
}

function ocultar(que) {
	document.images[que].style.visibility = "hidden";
/*
	if (window.event)
		window.event.cancelBubble = false;
*/
}

function presentar(que) {
	alert(que);
}

</script>
<style type="text/css">
p	{
	text-align: justify;
	text-indent: 1cm;
	margin: 0 auto;
}
.capa	{
	position: absolute;
	top: 0px;
	left: 0px;
}

.visible	{
	visibility: visible;
}

.oculta	{
	visibility: hidden;
}

</style>

</head>
<body style="background-color: #bbbbbb" >

<div id="contenedor" style="position: relative;" >
<!--onmouseout="ocultar('fondoopaco')"-->


<img src='../mapas/FONDO.gif' name="fondo" style="position: relative; top:0px; left: 0px;visibility: visible" 
usemap='#mapa' 
/>

<img name="fondoopaco" src='../mapas/fondo.png'
usemap='#mapa' class="capa oculta"
/>


<img name="nube" 
src='../mapas/nube.png'
usemap='#nube' class="capa oculta" style="visibility: hidden" />

<img name="sol" 
src='../mapas/sol.png'
usemap='#sol' class="capa oculta" style="visibility: hidden" />

<img name="palmizq" 
src='../mapas/palmizq.png'
usemap='#palmizq' class="capa oculta" />

<img name="palmder" 
src='../mapas/palmder.png'
usemap='#palmder' class="capa oculta" />

</diV>

<map name='mapa' >
<area name='area1' shape='poly' coords='204,100,307,102,298,88,290,84,280,84,273,89,265,77,253,77,238,79,233,84,232,88,220,87,211,94' alt='' target='' title='nube'
 href='#' onmouseover='mostrar("nube")' >
<area name='area2' shape='circle' coords='40,29,29' alt='' target='' title='' href='#' 
onmouseover='mostrar("sol")' >
<area name='area3' shape='rect' coords='1,345,138,73' alt='' target='' title='' href='#' 
onmouseover='mostrar("palmizq")' >
<area name='area4' shape='rect' coords='336,341,480,80' alt='' target='' title='' href='#' 
onmouseover='mostrar("palmder")' >
</map>

<map name="nube" >
<area shape='poly' coords='204,100,307,102,298,88,290,84,280,84,273,89,265,77,253,77,238,79,233,84,232,88,220,87,211,94' 
alt='' target='' title='' href='javascript: presentar("nube")' onmouseout='ocultar("nube")' >
</map>

<map name="sol" >
<area shape='circle' coords='40,29,29' 
alt='' target='' title='' href='javascript: presentar("sol")' onmouseout='ocultar("sol")' >
</map>

<map name="palmizq" >
<area shape='rect' coords='1,345,138,73' 
alt='' target='' title='' href='javascript: presentar("palmera izquierda")' onmouseout='ocultar("palmizq")' >
</map>

<map name="palmder" >
<area shape='rect' coords='336,341,480,80' 
alt='' target='' title='' href='javascript: presentar("palmera derecha")' onmouseout='ocultar("palmder")' >
</map>

</body>
</html>
Y las imágenes de la página son: http://www.pepemolina.com/mapas/FONDO.gif
http://www.pepemolina.com/mapas/fondo.png
http://www.pepemolina.com/mapas/nube.png
http://www.pepemolina.com/mapas/sol.png
http://www.pepemolina.com/mapas/palmizq.png
http://www.pepemolina.com/mapas/palmder.png

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 04/01/2006, 17:56
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

El efecto ya casi lo tengo:
Código:
<html>
<head>
<script>
textoCaliente = new Array();
textoCaliente["sol"] = ["zonasol1", "zonasol2"];
textoCaliente["nube"] = ["zonanube1"];
textoCaliente["fondo"] = [];
textoCaliente["fondoopaco"] = [];
textoCaliente["palmizq"] = [];
textoCaliente["palmder"] = ["zonapalmder"];

function tipoCapa(nombre)	{
	this.nombre = nombre;
	this.cual = "";
	this.retardo = 0;
	this.visible = true;
}
tipoCapa.prototype.mostrar = function(cual)	{
	document.images[cual].style.visibility = "visible";
	this.cual = cual;
	marcar(cual);
}

tipoCapa.prototype.ocultar = function(cual)	{
	document.images[cual].style.visibility = "hidden";
	desmarcar(cual);
	this.cual = "";
}

tipoCapa.prototype.ocultarespecial = function(cual, cuanto)	{
	if (cuanto > 0)	
		setTimeout(this.nombre + ".ocultarespecial('" + cual + "')", cuanto - 10);
	else
	if (this.cual == "")
		document.images[cual].style.visibility = "hidden";
}

tipoCapa.prototype.mostrarespecial = function(cual)	{
	if (this.cual != cual)
	document.images[cual].style.visibility = "visible";
}

var elemento;

function marcar(que)	{
	for (sitio in textoCaliente[que])
		document.getElementById(textoCaliente[que][sitio]).style.color = "blue";
}

function desmarcar(que)	{
	for (sitio in textoCaliente[que])
		document.getElementById(textoCaliente[que][sitio]).style.color = "black";
}

function presentar(que) {
	alert(que);
}

</script>
<style type="text/css">
p	{
	text-align: justify;
	text-indent: 1cm;
	margin: 0 auto;
}
.capa	{
	position: absolute;
	top: 0px;
	left: 0px;
}
</style>

</head>
<body style="background-color: #bbbbbb" onload="elemento = new tipoCapa('elemento')">

<div id="contenedor" style="position: relative;" >

<img src='http://www.pepemolina.com/mapas/FONDO.gif' name="fondo" style="position: relative; top:0px; left: 0px;visibility: visible" 
usemap='#mapa' onmouseover="elemento.mostrarespecial('fondoopaco')" />

<img name="http://www.pepemolina.com/mapas/fondoopaco" src='fondo.png'
usemap='#mapa' class="capa" style="visibility: hidden"
onmouseout="elemento.ocultarespecial('fondoopaco', 10)" />

<img name="nube" src='http://www.pepemolina.com/mapas/nube.png' usemap='#nube' style="visibility: hidden" class="capa" />
<img name="sol" src='http://www.pepemolina.com/mapas/sol.png' usemap='#sol' style="visibility: hidden" class="capa" />
<img name="palmizq" src='http://www.pepemolina.com/mapas/palmizq.png' usemap='#palmizq' style="visibility: hidden" class="capa" />
<img name="palmder" src='http://www.pepemolina.com/mapas/palmder.png' usemap='#palmder' style="visibility: hidden" class="capa" />

</diV>

<map name='mapa' >
<area name='area1' shape='poly' coords='204,100,307,102,298,88,290,84,280,84,273,89,265,77,253,77,238,79,233,84,232,88,220,87,211,94' alt='' target='' title='nube'
 href='#' onmouseover='elemento.mostrar("nube")' >
<area name='area2' shape='circle' coords='40,29,29' alt='' target='' title='' href='#' 
onmouseover='elemento.mostrar("sol")' >
<area name='area3' shape='rect' coords='1,73,138,345' alt='' target='' title='' href='#' 
onmouseover='elemento.mostrar("palmizq")' >
<area name='area4' shape='rect' coords='336,80,480,341' alt='' target='' title='' href='#' 
onmouseover='elemento.mostrar("palmder")' >
</map>

<map name="nube" >
<area shape='poly' coords='204,100,307,102,298,88,290,84,280,84,273,89,265,77,253,77,238,79,233,84,232,88,220,87,211,94' 
alt='' target='' title='' href='javascript: presentar("nube")' onmouseout='elemento.ocultar("nube")' >
</map>

<map name="sol" >
<area shape='circle' coords='40,29,29' 
alt='' target='' title='' href='javascript: presentar("sol")' onmouseout='elemento.ocultar("sol")' >
</map>

<map name="palmizq" >
<area shape='rect' coords='1,73,138,345' 
alt='' target='' title='' href='javascript: presentar("palmera izquierda")' onmouseout='elemento.ocultar("palmizq")' >
</map>

<map name="palmder" >
<area shape='rect' coords='336,80,480,341' 
alt='' target='' title='' href='javascript: presentar("palmera derecha")' 
onmouseout='elemento.ocultar("palmder")' >
</map>

<p>
Zonas calientes: <span id="zonasol1"
onmouseover="elemento.mostrar('sol')" onmouseout="elemento.ocultar('sol')" >sol</span>,
<span id="zonanube1" 
onmouseover="elemento.mostrar('nube')" onmouseout="elemento.ocultar('nube')" >nube</span>
son zonas a las que se puede acceder tanto desde el mapa como desde fuera...
</p>
<p>
pruebe a pasar el ratón sobre el 
<span id="zonasol2" onmouseover="elemento.mostrar('sol')" onmouseout="elemento.ocultar('sol')" >sol</span>
o por la
<span id="zonapalmder"
onmouseover="elemento.mostrar('fondoopaco'); elemento.mostrar('palmder')"
onmouseout="elemento.ocultar('palmder'); elemento.ocultar('fondoopaco')" >palmera derecha</span>
</p>


</body>
</html>
Está en este enlace: http://www.pepemolina.com/mapas/prueba2.html (por cierto, los enlaces al menos a mi me funcionan... )

Las imagenes pegadas a los bordes aún no van bien... tal vez sea mejor poner un borde (o margen) a la capa contenedora y usar el evento de la capa ...

La verdad es que tu respuesta se parece bastante a la mía en los resultados, pero con areas se pueden tener zonas calientes de polígonos y círculos

Por cierto, las áreas las produzco desde esta otra página que quiero mejorar: http://www.pepemolina.com/mapas/index2.html

Hay que seleccionar una imagen y enviar el formulario para crearlas (mejoré un poco una versión de la misma página que tal vez hayas visto anteriormente)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 06/01/2006, 14:39
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Sí, claro que la había visto. Está muy buena. Tengo un documento donde guardo direcciones de herramientas on line, y ya puse tu generador de recortes.

En el mensaje anterior puse un par de ideas mezcladas. Los ejemplos que mencioné usan en su mayoría botones y clip; hay uno con eventos en la imagen, pero no usa recortes.

Lo que se me había ocurrido era parecido a lo que hiciste. La diferencia es que los recortes se posicionaban tomando las coordenadas del area -es decir, que no eran del tamaño de la imagen de fondo con el sobrante 'invisible'-. Para evitar el problema de los eventos en capas que aparecen y desaparecen, se ponen los recortes en "sánguche" entre la imagen de fondo y una transparente, que contiene los shape y los eventos. El fondo simplemente se reemplaza por la imagen oscurecida y así quedaba destacado.

P.D. : Ah!, no me fijé que me habías preguntado por las fiestas. En realidad festejo poco. Justo estas Navidades acepté la invitación de mi hermana para pasarlas con mi familia después de 3 lustros. Y recordé por qué las pasé solo los últimos 3 lustros.
Pero me alegro de que tú te hayas divertido.

Última edición por furoya; 06/01/2006 a las 14:45
  #6 (permalink)  
Antiguo 08/01/2006, 12:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola:

Justamente los estilos "clip" son una especie de asignatura pendiente, que hasta tengo pensado un posible uso... en el tema de transiciones -tipo powerPoint-, conseguir el efecto de mosaico...

Sobre el tema original, creo que lo mejor evitar crear recortes pegados al borde, o simplemente no hacer rollover de la imagen principal...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:03.