Hola
kepawe 
gracias por responder
Te paso un ejemplo de lo que más o menos quiero hacer
Código PHP:
<html>
<head>
<title>Provincias</title>
<style type="text/css">
.tablatip {
border:1 solid #ccccff;
background-color: darkblue;
color: white;
width: 100%;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
font-family: Arial, Verdana, Helvetica;
font-size: 12;
}
.tdtip {
font-size:10px;
font-family: Arial, Verdana, Helvetica;
font-weight: bold;
width: 350px;
}
.tdvacio {
font-size:1px;
height: 3px;
}
</style>
<script type="text/javascript" language="JavaScript">
/**
* función de diseño de una celda "tr"
*/
function creaCelda( COLORFONDO, COLORTEXTO, CONTENIDO ) {
var Salida = '';
if( CONTENIDO == "" ) {
Salida += ' <tr><td class="tdvacio"> </td></tr>';
} else {
Salida += ' <tr bgcolor="' + COLORFONDO + '">';
Salida += ' <td class="tdtip">';
Salida += ' <font color="'+COLORTEXTO+'"> '+CONTENIDO+' </font>';
Salida += ' </td>';
Salida += ' </tr>';
}
return Salida;
}
/**
* al poner el ratón sobre una provincia del mapa
*/
function mouseOver( NOMBRE, COLORWEB1, COLORTXT1, TEXTO1,
COLORWEB1, COLORTXT1, TEXTO1,
.......
COLORWEB10, COLORTXT10, TEXTO10, ) {
var Cadena = '<table width="100%" border="0" class="tablatip">';
Cadena += ' <tr><td class="tdcabecera">'+NOMBRE+'</td></tr>';
//
// crear la celda de TEXT1 (siempre existe)
//
Cadena += creaCelda( COLORWEB1, COLORTXT1, TEXTO1 );
Cadena += creaCelda( "", "", "" );
//
// crear el resto de las celdas, si falta TEXTO(x) tampoco hay colores
//
if( TEXTO2 ) { Cadena += creaCelda( COLORWEB2, COLORTXT2, TEXTO2 ); }
if( TEXTO3 ) { Cadena += creaCelda( COLORWEB3, COLORTXT3, TEXTO3 ); }
.......
if( TEXTO1 ) { Cadena += creaCelda( COLORWEB10, COLORTXT10, TEXTO10 ); }
Cadena += '</table>';
***************************************
Aquí debería ir la parte del cálculo de la posición del
ratón y el posicionamiento del "tip" ¿no?
***************************************
Código PHP:
//
// compruebo el navegador utilizado (no lo pongo porque es muy largo) y visualizo el "tip"
// solo pongo el "document.all"
//
document.all['tip'].innerHTML = Cadena;
document.all['tip'].style.visibility = "visible";
}
/**
* al quitar el ratón de la provincia del mapa
*/
function mouseOut( ) {
//
// compruebo el navegador utilizado y oculto el "tip" ( este lo pongo completo)
//
if( document.all ) {
// Internet Explorer
document.all("tip").style.visibility = "hidden";
} else if( document.layers ) {
// Nestcape 4.X
document.layers["tip"].visibility = "hide";
} else if( document.getElementById ) {
// Nestcape 6.X
document.getElementById("tip").style.visibility = "hidden";
}
}
</script>
</head>
<body>
<div id="tip" style="position:absolute;width:400;height:100%;visibility:hidden;"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr nowrap="nowrap">
<th align="center">
<img src="../imagen/GRAFICO.PNG" usemap="#mapa" border="0" align="left">
</th>
</tr>
</table>
<!--
Los datos del mapa son un ejemplo, correspondería a un fichero generado con DELPHI/MYSQL
y metido "a pelo" con un "include" de PHP
//-->
<map name="mapa">
<area name="CORU" shape="rect" href="#" coords=" 715, 359, 727, 371"
onMouseOver="mouseOver( '#FFFFE6', '#000000', 'Galicia - La Coruña' )"
onMouseOut="mouseOut( this )"
onClick="return false;" >
<area name="PEPE" shape="rect" href="#" coords=" 715, 359, 727, 371"
onMouseOver="mouseOver( '#FFFFE6', '#000000', 'Bla, bla,bla - Linea 1',
'#FFFFE6', '#000000', 'Bla, bla,bla - Linea 2',
'#FFFFE6', '#000000', 'Bla, bla,bla - Linea 3' )"
onMouseOut="mouseOut( this )"
onClick="return false;" >
<area name="JUAN" shape="rect" href="#" coords=" 715, 359, 727, 371"
onMouseOver="mouseOver( '#FFFFE6', '#000000', 'Bla, bla,bla - Linea 1',
'#FFFFE6', '#000000', 'Bla, bla,bla - Linea 2' )"
onMouseOut="mouseOut( this )"
onClick="return false;" >
</map>
</body>
</html>
Tal y como lo veo, debería definir un manejador "onMouseMove" con sus comprobaciones del navegador del cliente y que el evento sea de la página o del área que desencadenó el "onOver/onOut" (lo de la página es porque el que tengo definido comprueba el "onMouseDown" para ir página adelante/atrás) y que permita utilizar las barras de scroll suando estás sobre ellas
No sé si voy a poder hacer tantas distinciones
(o estudiar más)
Gracias por la ayuda, si entiendes que se puede simplificar para no repetir tantas comprobaciones agrdecería sugerencias.
Abrazos
Salvica
)
