Imagen

[MizTiC]

Hola,

como podria hacer para que dependiendo sobre que zona de una imagen este pasando el raton, en la parte de abajo me aparezca un texo u otro?

no se si me explico bien, podeis ver un ejemplo en www.riu.com, en el mapa que sale en medio

Un saludo

[carcellan]

En el ejemplo que pones, lo hacen con un mapa activo de imágenes. Analizando el código fuente la clave está en las siguientes líneas:

<img src="idb/d00000000000.jpg" usemap="#mapa" width="375" height="150" border="0">

Esa línea asigna un mapa activo a la imagen. Y las líneas que estan un poco más abajo, entre <map name="mapa"> y </map>, sirven para marcar las zonas e indicar, con eventos onmouseover, lo que debe mostrarse cada vez que el ratón pase encima de una zona

Saludos

[palidowsky]

Esta muy bien. Es casi lo que yo necesito; ver el post un pelín más abajo. pero no funciona en Netscape

[MizTiC]

No lo acabo de entender, por ejemplo:

href="" onClick="document.control.ref.value = 'destinos/destino.inc'; document.control.zon.value='6'; document.control.submit(); return false;" onMouseover="if (typeof(timer) != 'undefined') clearTimeout(timer);" onMouseOut="timer = setTimeout('hideMenu()', 500)">Bulgaria</a><br>

el destino.inc que diablos es? Lo podrias explicar de una forma sencilla, sencilla.

Gracias

[carcellan]

El destino.inc es un archivo con código ASP, tipo include. Pero la clave está en que el OnMouseClick sirve para ir a la dirección que hayan asignado, mientras que con el onMouseOver se modifica el texto que aparece abajo. Tu lo tienes que adaptar.

Saludos

[MizTiC]

Lo he estado probando pero no me sale.

<img src="graficos/mapa.gif" usemap="#FPMap0" width="511" height="278" border="0">
<map name="FPMap0">

<area href="link1.htm" shape="circle" coords="309, 120, 6" onMouseOver="MM_showHideLayers('zonaSup4','', 'hide', 'zonaSup1','','show');" onMouseOut="MM_showHideLayers('zonaSup4','',' show','zonaSup1','','hide');" onClick="document.control.zon.value = '1'; document.control.dst.value = ''; document.control.submit(); return false;" title="">

Y luego donde quiera que me salga el texto:

<div id="zonaSup1" style="position: absolute; width: 526px; height: 21px; left: 90px; top: 337px; visibility: hidden;"><table width="526" height="21" cellpadding="0" cellspacing="0" bgcolor="#a4d1ff"><tr><td valign="middle"><font color="#6491af"><b>Florida</b></font></td></tr></table></div>

Eso es mas o menos lo que sale en la pagina, pero yo es que no me entero de nada.
Ademas yo creo que lo que yo quiero es mas sencillo, porque al pulsar sobre la zona activa llevaría a otra pagina y ellos lo que hacen es que sale un nuevo mapa.

Bueno perdonad por dar la vara, a ver si me lo podeis explicar de forma sencillita.

Gracias

[MizTiC]

nadie sabe como se hace?

no sabeis por donde podria seguir buscando, ke me estoy empezando a desesperar y a volver loco

Gracias

[Jarto]

Yo tambien lo he estado probando, pero no hay manera.

Si consigues sacarlo dilo por aki

Gracias

[motto]

A ver por partes, eso no es un mapa de imagen, es una imagen sobre la que hay varios layers en funcion del layer en el que te situas se muestra un texto u otro

Podeis hacerlo simplemente creando una tabla del mismo tamaño que la imagen, utilizando esa imagen como fondo de la tabla y dividiendo la tabla en celdas, en cada una de las celdas insertar un layer con un ID diferente y crear el mensaje para el evento mouse over

teneis TODAS las tags y atributos existentes de CSS necesarios en html facil

<a href='ir.asp?http://www.htmlfacil.com' target='_blank'>http://www.htmlfacil.com...</a>

Y teneis la llibreria JSVF en <a href='ir.asp?http://www.javascriptfacil.com' target='_blank'>http://www.javascriptfacil.com...</a>

que os hara compatibles los layers con TODOS LOS NAVEGADORES incluido el opera
en los proximos días pondre un ejemplo en <a href='ir.asp?http://www.javascriptfacil.com' target='_blank'>http://www.javascriptfacil.com...</a>
para que lo utilicies, vereis que ese efecto del modo que os explico es muy facil de realizar

[MizTiC]

Pues muchas gracias, yo por mi parte estare impaciente esperando a ke lo publikes en javascriptfacil, pq ya lo daba por imposible.

Gracias de nuevo

[KarlanKas]

Te sirve que funcione en NS a partir de 6.0?

Código:

<html>
<head>
	<title>Hola</title>

<script>
texto=new Array;
texto[1]="hola hola hola";
texto[2]="<b>Adios adios</b><br><br>fff";
texto[3]="ffrfrffrfrf<input type=button value=pincha>";
function texto2(opcion){
letra=texto[opcion]
document.getElementById('texxxto').innerHTML=letra
}

</script>
</head>
<body>
<img src="e.jpg" onmouseover="texto2('1');">
<img src="q.jpg" onmouseover="texto2('2');">
<img src="df" onmouseover="texto2('3');">

<div id="texxxto"></div>
</body>
</html>

[MizTiC]

Holas,
pues a mi personalmente lo del netscape me da un poco igual (la mayoria usa explorer, no?)
Pero te queria comentar:
· ¿Se podria hacer de alguna manera que antes de que pases el raton por la zona que te dara el texto, haya ya un texto y que este lo sustituya, y que cuando el raton salga de la zona activa vuelva a aparecer el texto que habia en un principio?

Bueno, no se si he acabado de explicarme del todo bien

[KarlanKas]

Claro que sí!

Código:

<html>
<head>
<title>Hola</title>

<script>
texto=new Array;
texto[0]="Bienvenido chavalín";
texto[1]="hola hola hola";
texto[2]="<b>Adios adios</b><br><br>fff";
texto[3]="ffrfrffrfrf<input type=button value=pincha>";
function texto2(opcion){
letra=texto[opcion]
document.getElementById('texxxto').innerHTML=letra
}

</script>
</head>
<body>
<img src="e.jpg" onmouseout="texto2('0');" onmouseover="texto2('1');">
<img src="q.jpg" onmouseout="texto2('0');" onmouseover="texto2('2');">
<img src="df" onmouseout="texto2('0');" onmouseover="texto2('3');">

<div id="texxxto">Bienvenido Chavalín</div>
</body>
</html>

Espero que te sirva!!

[MizTiC]

Muchas gracias!!!!!

Funciona genial, solo una cosa, cuando intento cambiar el tipo, tamaño, color,... del texto me da un error.

No se puede cambiar el tipo de letra?


Gracias de nuevo!

[KarlanKas]

Por supuesto!

Se me ocurre que hagas lo sigueinte:

Código:

<html>
<head>
<title>Hola</title>

<script>
texto=new Array;
texto[0]="<font style='font:normal 12px/14px verdana;color:red">Bienvenido chavalín</font>";
texto[1]="<font style='font:bold 12px/14px verdana;color:green">hola hola hola</font>";
texto[2]="<b style='font:normal 12px/14px verdana;color:red">Adios adios</b><br><br>fff";
texto[3]="ffrfrffrfrf<input type=button value=pincha>";
function texto2(opcion){
letra=texto[opcion]
document.getElementById('texxxto').innerHTML=letra
}

</script>
</head>
<body>
<img src="e.jpg" onmouseout="texto2('0');" onmouseover="texto2('1');">
<img src="q.jpg" onmouseout="texto2('0');" onmouseover="texto2('2');">
<img src="df" onmouseout="texto2('0');" onmouseover="texto2('3');">

<div id="texxxto">Bienvenido Chavalín</div>
</body>
</html>

Es decir, dentro de las variables texto puedes poner código html para cambiar las dfuentes, los colores... sólo tienes que tener especial cuidado de no utilizar comillas dobles dentro de las variables.

Si tienes más dudas pregunta.