Foros del Web - Ver Mensaje Individual

caricatos · #4 (**permalink**) 04/01/2006, 17:56

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