04/01/2006, 17:56
|
 | Moderador | | Fecha de Ingreso: abril-2002 Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años 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 |