Ver Mensaje Individual
  #3 (permalink)  
Antiguo 24/11/2004, 19:02
Avatar de salvica
salvica
 
Fecha de Ingreso: agosto-2003
Ubicación: Albacete - España
Mensajes: 23
Antigüedad: 21 años, 5 meses
Puntos: 0
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-colordarkblue;
           
colorwhite;
           
width100%;
           
padding-left2px;
           
padding-right2px;
           
padding-bottom2px;
           
font-familyArialVerdanaHelvetica;
           
font-size12;
      }
      .
tdtip {
           
font-size:10px;
           
font-familyArialVerdanaHelvetica;
           
font-weightbold;
           
width350px;
      }
      .
tdvacio {
           
font-size:1px;
           
height3px;
      }
    </
style>
   <
script type="text/javascript" language="JavaScript">

      
/**
      * función de diseño de una celda "tr"
      */
      
function creaCeldaCOLORFONDOCOLORTEXTOCONTENIDO ) {
           var 
Salida  '';
               if( 
CONTENIDO == "" ) {
                   
Salida += '  <tr><td class="tdvacio">&nbsp;</td></tr>';
               } else {
                   
Salida += '  <tr bgcolor="' COLORFONDO '">';
                   
Salida += '     <td class="tdtip">';
                   
Salida += '        <font color="'+COLORTEXTO+'">&nbsp;'+CONTENIDO+'&nbsp;</font>';
                   
Salida += '     </td>';
                   
Salida += '  </tr>';
               }
               return 
Salida;
      }

      
/**
      * al poner el ratón sobre una provincia del mapa
      */
      
function mouseOverNOMBRECOLORWEB1,  COLORTXT1,  TEXTO1
                                  
COLORWEB1,  COLORTXT1,  TEXTO1
                                   ....... 
                                  
COLORWEB10COLORTXT10TEXTO10, ) {
                   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 += creaCeldaCOLORWEB1,  COLORTXT1,  TEXTO1 );
                       
Cadena += creaCelda"""""" );
                    
//
                    // crear el resto de las celdas, si falta TEXTO(x) tampoco hay colores
                    //
                       
if( TEXTO2 ) { Cadena += creaCeldaCOLORWEB2,  COLORTXT2,  TEXTO2 ); }
                       if( 
TEXTO3 ) { Cadena += creaCeldaCOLORWEB3,  COLORTXT3,  TEXTO3 ); }
                       ....... 
                       if( 
TEXTO1 ) { Cadena += creaCeldaCOLORWEB10COLORTXT10TEXTO10 ); }
                       
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