Foros del Web » Programando para Internet » Javascript »

ayudita para modificar un script que muestra texto onmouseover

Estas en el tema de ayudita para modificar un script que muestra texto onmouseover en el foro de Javascript en Foros del Web. Bien tengo lo siguiente: Código: <script> function showtip(current,e,num) { if (document.layers) // Netscape 4.0+ { theString="<DIV CLASS='ttip'>"+num+"</DIV>" document.tooltip.document.write(theString) document.tooltip.document.close() document.tooltip.left=e.pageX+14 document.tooltip.top=e.pageY+2 document.tooltip.visibility="show" } else { ...
  #1 (permalink)  
Antiguo 11/10/2004, 18:17
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
ayudita para modificar un script que muestra texto onmouseover

Bien tengo lo siguiente:
Código:
<script>


           
           
     function showtip(current,e,num)
        {
         if (document.layers) // Netscape 4.0+
            {
             theString="<DIV CLASS='ttip'>"+num+"</DIV>"
             document.tooltip.document.write(theString)
             document.tooltip.document.close()
             document.tooltip.left=e.pageX+14
             document.tooltip.top=e.pageY+2
             document.tooltip.visibility="show"
            }
         else
           {
            if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
              {
               elm=document.getElementById("tooltip")
               elml=current
               elm.innerHTML=num
               elm.style.height=elml.style.height
               elm.style.top=parseInt(elml.offsetTop+elml.offsetHeight)
               elm.style.left=parseInt(elml.offsetLeft+elml.offsetWidth+10)
               elm.style.visibility = "visible"
              }
           }
        }
function hidetip(){
if (document.layers) // Netscape 4.0+
   {
    document.tooltip.visibility="hidden"
   }
else
  {
   if(document.getElementById) // Netscape 6.0+ and Internet Explorer 5.0+
     {
      elm.style.visibility="hidden"
     }
  } 
}
</script>
<link href="priority.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="tooltip" style="position:absolute; visibility:hidden; border:1px solid black; font-size:11px; layer-background-color:lightyellow; background-color:lightyellow; padding:1px; width: 30%;"></div>
Lo cual luego en un link de código:

Código:
<a href = '/xxx/xxx.php?dayClick=1&daySelect=31&monthSelect=10&yearSelect=2004&select_prxx=0' onMouseover="showtip(this,event,'R. Madrid - Getafe')" onMouseOut="hidetip()">31</a></td>
Pues hace que si te pongas encima del link, te salga como una pestaña con el nombre del evento, en este caso R. Madrid - Getafe.

El tema es que la pestaña no sále en la posición teórica cuando hago la web, sino que en internet, al ejecutarse, siempre sale a la izquierda en el mismo lado. No me vale usar position relative, necesito absolute, pero no hay manera de hacer que cambie la posición. Podéis ver una prueba en:

http://sensesfail.lookingat.us/prueba.htm
Venga graciasss.

Última edición por apañero; 30/10/2004 a las 10:56
  #2 (permalink)  
Antiguo 14/10/2004, 17:06
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
una ayudita pleazzzz
  #3 (permalink)  
Antiguo 19/10/2004, 05:43
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
a mi me da que el codigo style="position:absolute;... no funciona bien, o no hace lo que yo quiero, que es que se muestre el layer en la parte central de la página
  #4 (permalink)  
Antiguo 21/10/2004, 17:12
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
ayudaaaaaaa
  #5 (permalink)  
Antiguo 30/10/2004, 10:43
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
bueno he seguido investigando y no consigo nada, debe ser que el layer no puede ponerse en más que una posicion pero no sé por qué ni cómo hacer que se ponga en cualquier parte de mi página web. En la teoría, editando la web sí que sale muy bien puesto el layer donde yo quiero pero luego...

Podéis ver una prueba en:

http://sensesfail.lookingat.us/prueba.htm
Venga graciasss.

Última edición por apañero; 30/10/2004 a las 10:57
  #6 (permalink)  
Antiguo 01/11/2004, 19:55
 
Fecha de Ingreso: agosto-2004
Mensajes: 157
Antigüedad: 19 años, 8 meses
Puntos: 5
Hola apañero

Haber si te sirve este script, lo he probado en Mozilla 1.7 y IE6 y parece que funciona, deberia de funcionar en IE5+ y NS6+, si encuentras algun error o ves alguna forma de mejorarlo, seguro que se puede mejorar, cuentamelo.

Código PHP:
<html><head>
<
link rel="stylesheet" href="prueba_files/estiloprincipal.htm" type="text/css">
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<
script language="JavaScript" type="text/javascript">
<!--
function 
get_client_width() {
    if (
window.innerWidth != null)
        return 
window.innerWidth;
    if (
document.body.clientWidth != null)
        return 
document.body.clientWidth;
    return (
null);
}
function 
get_client_height() {
    if (
window.innerHeight != null)
        return 
window.innerHeight;
    if (
document.body.clientHeight != null)
        return 
document.body.clientHeight;
    return (
null);
}


function 
get_scroll_client_width(){
  if(
window.pageXOffset != null)
    return 
window.pageXOffset;
  if(
document.body.scrollLeft != null)
    return 
document.body.scrollLeft;
  return (
null)

}
function 
get_scroll_client_height(){
  if(
window.pageYOffset != null)
    return 
window.pageYOffset;
  if(
document.body.scrollTop != null)
    return 
document.body.scrollTop;
  return (
null)

}

function 
show_tooltip(evt,this_link,tip_text){
// Establece aqui el ancho maximo para el tooltip
var width_tooltip 300
plus_xy 
10 // establece la distancia entre el tooltip y el enlace
var my_tooltip document.getElementById("tooltip")
with(my_tooltip.style){
  
visibility "hidden"
  
width""
  
left "0px"
  
top "0px"
  
}

my_tooltip.innerHTML "<div class='titleTooltip'>" this_link.innerHTML " de Noviembre<\/div>" tip_text +""

my_tooltip.style.width my_tooltip.offsetWidth parseInt(width_tooltip) ?  my_tooltip.offsetWidth width_tooltip
elemWidth 
my_tooltip.offsetWidth
elemHeight 
my_tooltip.offsetHeight


width_window 
=  get_client_width()+ get_scroll_client_width()
height_window get_client_height()+ get_scroll_client_height()

topVal evt.pageY evt.pageY  evt.document.body.scrollTop
leftVal 
evt.pageX evt.pageX evt.document.body.scrollLeft


  
if(elemWidth width_window leftVal ) { leftVal += plus_xy}
  
  else if(
elemWidth leftVal){leftVal -= elemWidth plus_xy }

  else{
leftVal leftVal - (elemWidth 2)}


  if(
elemHeight plus_xy  height_window topVal ) { }
  else if(
get_scroll_client_height() < topVal - (elemHeight plus_xy)){topVal -=(elemHeight plus_xy )}

  else{
topVal elemHeightplus_xy  get_client_height()   ?  get_scroll_client_height() + plus_xy topVal - ((elemHeight plus_xy )/ 2)}

    
my_tooltip.style.top topVal;
    
my_tooltip.style.left leftVal
    my_tooltip
.style.visibility "visible"

        
this_link.onmouseout hide_tooltip


}

function 
hide_tooltip(){

        
document.getElementById("tooltip").style.visibility ="hidden"
    
return false

}

//-->
</script>
<style media="screen" type="text/css">
<!--
#tooltip {
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
visibility: hidden }

.hyperText  {
    color: gray;
    font: 10px/12px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
    font-weight: bold;
    background-color: #FFFAF0;
    padding-top: 0px;
    padding-bottom: 4px;
    padding-left:10px;
    padding-right: 5px;
    border: 2px solid gray;
    }
 .titleTooltip{
  color:white;
  font-weight: bold;
    border: 1px solid gray;
    background-color: gray;
    padding-top: 3px;
    padding-bottom:3px;
    padding-right: 20px;
    padding-left: 5px;
    margin-top: -2px;
    margin-left: -10px;
    margin-right: -5px;
    margin-bottom: 4px;

}




-->
</style>



<!-- base --></head>
<body bgcolor="#1f1a17" link="#ffff33" vlink="#ffff99">
<div id="tooltip" class ="hyperText" > </div>


<table class="calendarTable" align="center" border="1" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tbody><tr class="calendarRow">
<td class="weekheader"><b>Lu</b></td>
<td class="weekheader"><b>Ma</b></td>
<td class="weekheader"><b>Mi</b></td>
<td class="weekheader"><b>Ju</b></td>
<td class="weekheader"><b>Vi</b></td>
<td class="weekheader"><b>Sa</b></td>
<td class="weekheader"><b>Do</b></td>
</tr>
<tr class="calendarRow">
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
<td class="emptydate" align="center">
1</td>
<td class="emptydate" align="center">
2</td>
<td class="emptydate" align="center">
3</td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
4</td>
<td class="emptydate" align="center">
5</td>
<td class="emptydate" align="center">
6</td>
<td class="emptydate" align="center">
7</td>
<td class="emptydate" align="center">
8</td>
<td class="emptydate" align="center">
9</td>
<td class="emptydate" align="center">
10</td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
11</td>
<td class="emptydate" align="center">
12</td>
<td class="emptydate" align="center">
13</td>
<td class="emptydate" align="center">
14</td>
<td class="emptydate" align="center">
15</td>
<td class="emptydate" align="center">
16</td>
<td class="filledColor0" align="center">
<a target="principal" >17</a></td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
18</td>
<td class="emptydate" align="center">
19</td>
<td class="emptydate" align="center">
20</td>
<td class="emptydate" align="center">
21</td>
<td class="emptydate" align="center">
22</td>
<td class="emptydate" align="center">
23</td>
<td class="filledColor0" align="center">
<a  href="javascript:void(0)" onmouseover="show_tooltip(event,this,'Real Madrid - Getafe')">24</a></td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
25</td>
<td class="emptydate" align="center">
26</td>
<td class="emptydate" align="center">
27</td>
<td class="emptydate" align="center">
28</td>
<td class="emptydate" align="center">
29</td>
<td class="emptydate" align="center"><a  href="javascript:void(0)" onmouseover="show_tooltip(event,this,'Real Madrid - Barcelona')">30</a></td>
<td class="filledColor0" align="center">
<a  href="javascript:void(0)" onmouseover="show_tooltip(event,this,'Real Madrid - Real Sociedad')">31</a></td>
</tr>
<tr class="calendarRow">
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
 <td class="emptydate"><div align="center">-</div></td>
</tr>
</tbody></table>
</body></html> 
Un saludo
  #7 (permalink)  
Antiguo 01/11/2004, 21:13
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
puf funciona perfecto en la página de prueba, el tema es que la cosa de prueba la puse como referencia, para luego yo cambiar lo poco que fuera, no esperaba un código nuevo... Vaya artista estás hecho jeje. La página de prueba es el resultado de un script en php, si aplico tal cual ese javascript al script en php no funciona porque el script en php es más complejo que esa página de prueba. Fue bonito en la página de prueba XD

Te pongo la función principal en php que se encarga de pintar el calendario con los eventos diarios (los eventos estan guardados en un txt)

Código:
function drawTable ($yr, $mn)
{

    global $PHP_SELF, $mouse_over_effect;
    global $Sun,$Mon,$Tue,$Wed,$Thu,$Fri, $Sat, $first_day_monday;  
    
    $entries = $this->getDaysInMonth ($yr, $mn);
    $firstSq = $this->getFirstDayInMonth ($yr, $mn);

    $arr_dates = array();
    $arr_priority = array();

    $this->getEntryArray($yr, $mn, $arr_dates, $arr_priority);
    
    
    echo "<table class='calendarTable' cellspacing='0' cellpadding='0' border='1' bordercolor='#111111' align='center'>\n";
    echo "<tr class='calendarRow'>\n";
    if ($first_day_monday)
	 {
       echo "<td class='weekheader'><b>$Mon</b></td>\n";
       echo"<td class='weekheader'><b>$Tue</b></td>\n";
       echo "<td class='weekheader'><b>$Wed</b></td>\n";
       echo "<td class='weekheader'><b>$Thu</b></td>\n";
       echo"<td class='weekheader'><b>$Fri</b></td>\n";
       echo"<td class='weekheader'><b>$Sat</b></td>\n";
	    echo "<td  class='weekheader'><b>$Sun</b></td>\n";
	 }
	 else
	 {
	    echo "<td  class='weekheader'><b>$Sun</b></td>\n";
	    echo "<td class='weekheader'><b>$Mon</b></td>\n";
       echo"<td class='weekheader'><b>$Tue</b></td>\n";
       echo "<td class='weekheader'><b>$Wed</b></td>\n";
       echo "<td class='weekheader'><b>$Thu</b></td>\n";
       echo"<td class='weekheader'><b>$Fri</b></td>\n";
       echo"<td class='weekheader'><b>$Sat</b></td>\n";
	    
	 }
    echo "</tr>\n";
    // some of the first sqaures may be blank i.e if month doesn't
    // start on Sunday. so use $count to determine if square is blank
    $day_date= $first_day_monday -  $firstSq ;
               
    for ($theRow=0; $theRow<6; $theRow++)
    {
        echo "<tr class='calendarRow'>\n";
        for ($theCol=0; $theCol<7; $theCol++)
        {
            $textEntry = "";
            $day_date++;
            if ($day_date<  1 || $day_date> $entries)
            {
                echo " <td class ='emptydate'><div align='center'>-</div></td>\n";
                continue;
            }
            else
            {
                // see if there is an entry for this date and if there is
                // get the index of the array holding that date info
                $found = false;
                $found_index = 0;
                for ($j = 0; $j< count($arr_dates); $j++)
                {
                   if (intval ($arr_dates[$j]) == $day_date)
                   {
                      $found = true;
                      $found_index = $j;
                   }
                }

            }

            $ind = 0;
            if (!$found)
            {
                echo "<td align='center' class ='emptydate'>\n";
            }
            else
            {
                $ind = $arr_priority[$found_index];
                echo "<td align='center' class='filledColor$ind'>\n";
                         
                if ($mouse_over_effect)
                {                    
                    $textEntry =  $this->showUserDayEvent($yr, $mn, $day_date, $pri);
                                       
                    $textEntry = str_replace( "\"", "&quot;",$textEntry);
                    $textEntry = str_replace( "'", "&rsquo;",$textEntry);
                    $textEntry = str_replace( "\r\n", "&nbsp;",$textEntry);                   
                    
                }

                
            }

            if (strlen($textEntry))
            {
               echo "<a target='principal' href = '#' onClick=\";return false\" onMouseover=\"showtip(this,event,'$textEntry');return false\" onMouseOut=\"hidetip()\">$day_date</a>";
            }
            else 
            {
                 echo "$day_date";
            }
           
            echo "</td>\n";
        }
        echo "</tr>\n";
    }
    echo "</table>";
   

   $this->show_colour_codes();
  }
Espero que esto no fastidie tu perfecto trabajo, a ver si puedes readaptarlo. Si te falta alguna funcion o cosa por saber aquí me tienes XD

muchas gracias por todo
  #8 (permalink)  
Antiguo 02/11/2004, 09:04
 
Fecha de Ingreso: agosto-2004
Mensajes: 157
Antigüedad: 19 años, 8 meses
Puntos: 5
Hola apañero

De php no tengo mucha idea, he empezado a mirar como funciona hace pocos mes y estoy aprendiendo los conceptos más basicos, seguro que dentro de poco estare preguntando en el foro php, puedes probar a colocar el script debajo de la tabla, puede que así funcione.

He modificado tu script, el tooltip se muestra a la derecha del ratón.
Código PHP:
if(document.getElementById// Netscape 6.0+ and Internet Explorer 5.0+
              
{
               
elm=document.getElementById("tooltip")
               
elml=current
               elm
.innerHTML=num
               elm
.style.height=elml.style.height
               
/*Netscape utiliza la propiedad pageY y en IE e.y para obtener la posición del elemento,
               en el caso de IE hay que sumarle document.body.scrollTop que devuelve
               el numero de pixeles cuando la página es desplazada con el scroll*/
               
elm.style.tope.pageY e.pageY  e.document.body.scrollTop
               elm
.style.lefte.pageX e.pageX 10 e.document.body.scrollLeft 10
               elm
.style.visibility "visible"
              

Espero que te sea util.
Por cierto, muchas gracias por ofrecerme tu ayuda.
Un saludo
  #9 (permalink)  
Antiguo 02/11/2004, 12:21
 
Fecha de Ingreso: octubre-2003
Ubicación: Barcelona
Mensajes: 35
Antigüedad: 20 años, 6 meses
Puntos: 1
Hum, y como seria para hacer esto mismo pero con estas características:
-Que el texto estuviese en la celda de una tabla por ejemplo (ya que las capas son muy putas por el tema de diferentes resoluciones de pantalla)
-Que al pasar el mouse sobre el 17 ponga en una celda madrid getafe, al pasarlo sobre el 24 que ponga valencia madrid... es decir, sobre cada link lo q se ve aparece en un lugar diferente.
Es una opinión personal pero cambiando estas dos cosas lo veo más práctico.
Gracias!
  #10 (permalink)  
Antiguo 03/11/2004, 13:04
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
mmm, amigo kepawe no lo consigo. échale un vistacillo de nuevo a la página de prueba a ver si ves qué falla :

http://sensesfail.lookingat.us/prueba.htm


venga gracias por todo :)
  #11 (permalink)  
Antiguo 03/11/2004, 14:50
 
Fecha de Ingreso: agosto-2004
Mensajes: 157
Antigüedad: 19 años, 8 meses
Puntos: 5
Hola de nuevo apañero

El error está en el paso de los argumentos a la función, aquí te pongo la forma correcta.


<a target='principal' href =' #' onClick=";return false" onmouseover="showtip(event,this,'Málaga - R. Madrid');return false;" >7</a>

He omitido el evento onmouseout="hidetip()" porque este evento es llamado dentro de la funcion showtip().

Un saludo
  #12 (permalink)  
Antiguo 03/11/2004, 15:43
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
perfecto!!!

muchas gracias por todo amigo!!
  #13 (permalink)  
Antiguo 26/01/2005, 06:14
Dig
 
Fecha de Ingreso: enero-2005
Mensajes: 60
Antigüedad: 19 años, 4 meses
Puntos: 0
Hola chicos.
He estado siguiendo atentamente vuestras explicaciones ya que lo que ando buscando es practicamente lo que habeis desarrollado.
El caso es que en el tema del php ando un poco perdido.
¿Podríais poner un enlace a donde este el codigo definitivo y como ha de ponerse en la página para que funcione?.

Por otro lado os cuento lo que quiero exactamente ya que veo que vosotros controlais bastante y además ya os habeis estado pegando con el tema de los calendarios.

Por un lado lo que habeis desarrollado. Un calendario en el que se marquen de alguna manera los días que tienen un enlace y que al pinchar vayan a una página determinada.

Mis preguntas son las siguientes:

1.- ¿Se podria hacer que el calendario marcase una página correspondiente el dia actual?. Me explico. Si hoy es dia 26 que cargase la página 26012005.html, por ejemplo. Mañana, día 27 que cargase 27012005.html. De esta forma con guardar las páginas con esta nomenclatura no haria falta definir el enlace correspondiente en el calendario todos los días de forma manual.

2.- Se puede hacer que el día actual aparezca en rojo o con un cuadrado alrededor o algo así?.

He encontrado una página que tiene lo que busco pero no he podido conseguir el codigo. La página es esta http://www.karlankas.net/blog/

Venga, un saludo. Si podeis echarme un cable os estare muy agradecido

Dig
  #14 (permalink)  
Antiguo 26/01/2005, 11:50
Dig
 
Fecha de Ingreso: enero-2005
Mensajes: 60
Antigüedad: 19 años, 4 meses
Puntos: 0
Saludos de nuevo.
Queria preguntaros tambien.
¿Como se hace para que el calendario que habeis puesto aqui se puedan pasar adelante y atras los meses y los años?. En el ejemplo que habeis puesto solo aparece un mes y no se puede ir a otros ni a otros años.
¿Teneis un ejemplo de un calendario concluido en alguna dirección?.

Venga
Dig
  #15 (permalink)  
Antiguo 10/02/2005, 09:03
 
Fecha de Ingreso: abril-2004
Mensajes: 310
Antigüedad: 20 años
Puntos: 0
Dig el ejemplo aquí puesto es la salida de un programa bastante más complejo que una simple tabla calendario en html. Si buscas un calendario al que poder añadirle eventos, que los días salgan marcados, cambiar de meses, etc., pásate por www.hotscripts.com y busca "calendar"
y verás todos los calendarios que tienes para implementar en tu página.

Yo estaba usando un programa llamado priority calendar que es muy sencillito, aunque es en php y algo habrás de saber.
Prueba los diferentes programas hasta que veas uno que se adapta a lo que quieres, y luego te lo instalas y customizas personalizadamente.

un saludo
  #16 (permalink)  
Antiguo 10/05/2005, 04:26
 
Fecha de Ingreso: abril-2005
Mensajes: 13
Antigüedad: 19 años
Puntos: 0
paso de parametros a tooltip

Hola:
Me gusta mucho el ejemplo que has puesto, pero mi problema es que yo le quiero pasar una serie de variables a la función show_tooltip para que las muestre en la ventana al pasar el ratón y no se como hacerlo. Tu le pasas una variable de tip_text constante. FComo puedo hacerlo?
Agradeceria la ayuda.
Saludos
  #17 (permalink)  
Antiguo 10/05/2005, 15:39
 
Fecha de Ingreso: agosto-2004
Mensajes: 157
Antigüedad: 19 años, 8 meses
Puntos: 5
Hola maria_u

Me podrias poner un ejemplo para saber las variables que quieres pasar y modificar el script para que se adapte a tus necesidades.

Un saludo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:44.