Foros del Web » Programando para Internet » Javascript »

Enlaces de un lado..., texto del otro (o htm)

 Estas en el tema de Enlaces de un lado..., texto del otro (o htm) en el foro de Javascript en Foros del Web. O sea, tengo una tabla dividida en 2, con varios enlaces a la izquierda y quiero que al pasar el puntero sobre ellos me muestre ...
  #1 (permalink)  
Antiguo 28/08/2002, 18:14
 
Fecha de Ingreso: abril-2002
Mensajes: 16
Antigüedad: 22 años
Puntos: 0
Enlaces de un lado..., texto del otro (o htm)
O sea, tengo una tabla dividida en 2, con varios enlaces a la izquierda y quiero que al pasar el puntero sobre ellos me muestre a la derecha (dentro de la misma tabla) una descripción completa de cada producto (posiblemente que llame a un htm con texto e imágenes). :)

Espero sepan entender mi pregunta :)

Saludos.
  #2 (permalink)  
Antiguo 29/08/2002, 02:54
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
El código que viene a continuación sólo sirve para IE y NS a partir de la versión 6.0. Dime si te sirve!
  #3 (permalink)  
Antiguo 29/08/2002, 02:55
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
Código: 
<html>
<head>
<style>
a{
color:white;
font:normal 12px/16px verdana;
text-decoration:none;
}
a:hover{
text-decoration:none;
color:#bbbb00;
}
table{
	background:navy;
	border: 1px solid White;
	 width:300px; 
	 height:400px;
	 color:white;
	 font:normal 12px/16px verdana;
	 }
td{
	border: 1px solid White;
	height:80px;
	}
</style>
	<title>Prueba</title>
	<script language="JavaScript" type="text/javascript">
var lapiz="El <b>lapicero</b> se compone de una barra de grafito envuelta por un cilindro de madera. Tiene la gran ventaja de que se puede borrar sin dejar rastro de lo escrito.";
var boligrafo="El <b>boligrafo</b> es un invento del siglo XX. revolucionó la escritura al ser una pluma sin plumín y por tanto mucho más resistente. Su inconveniente con respecto a la plunma es que éste no es recargable y el trazo es mucho menos elegante.";
var pluma="La <b>pluma</b> recibe su nombre de los origenes de este elemento de escritura que consistía en una pluma de ganso debidamente cortada que se humedecía en tinta.";
var rotulador="El <b>rotulador</b> Es un elemento del que no me apetece escribir nada.";
var defecto="Pase el ratón por encima de las distintas posibilidades para ver su descripción.";
function cambio(texto){
document.getElementById('explicacion').innerHTML=texto;
}
</script>
</head>
<body onload="cambio(defecto)">
<table><tr><td><a href="#" onmouseover="cambio(boligrafo)" onmouseout="cambio(defecto)">Bolígrafo</a></td>
    <td rowspan="4" width=200 id="explicacion"> </td>
</tr>
<tr>
    <td><a href="#" onmouseover="cambio(pluma)" onmouseout="cambio(defecto)">Pluma</a></td>
</tr>
<tr>
    <td><a href="#" onmouseover="cambio(lapiz)" onmouseout="cambio(defecto)">Lápiz</a></td>
</tr>
<tr>
    <td><a href="#" onmouseover="cambio(rotulador)" onmouseout="cambio(defecto)">Rotulador</a></td>
</tr>
</table>
</body>
</html>
Espero que te ayude!! Si quieres cualquier explicación dímelo!
  #4 (permalink)  
Antiguo 29/08/2002, 02:57
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
Ah!

En las variables lápiz, boligrafo... puedes meter código HTML así que si quieres meter una imagen no tengas reparo en poner:
var pluma="<img src='imagen/pluma.jpg'>La pluma fue ..."

Pues ya está!
  #5 (permalink)  
Antiguo 29/08/2002, 11:14
 
Fecha de Ingreso: abril-2002
Mensajes: 16
Antigüedad: 22 años
Puntos: 0
Re: Enlaces de un lado..., texto del otro (o htm)
Gracias KarlanKas,

Esto buscaba, habia encontrado un java script pero trabaja con matrices y es un despelote poner cada mansaje en una sola linea, ya que son largos.

Ahora dime, si quiero que el enlace sirva además para ir a otra página con click, ¿debo meterle un comportamiento tipo "ir a Url" con "on click" en dreamweaver?, ¿o se hace de alguna manera más fácil con htm directamente?

Salu2.
  #6 (permalink)  
Antiguo 29/08/2002, 11:30
 
Fecha de Ingreso: abril-2002
Mensajes: 16
Antigüedad: 22 años
Puntos: 0
Re: Enlaces de un lado..., texto del otro (o htm)
Otra pregunta:

Cuando defines la variable, por ejemplo:

Código: 
var lapiz="El <b>lapicero</b> se compone de una barra de...";
¿Como puedo hacer para que en vez de poner todo el texto en la misma linea, lo pueda poner en un TXT o un HTM externo y que se cargue en la variable?

O sea,

Código: 
var lapiz="cargar TEXTO.TXT o TEXTO.HTM directamente";
Gracias de antemano por tu ayuda

Saludos.
  #7 (permalink)  
Antiguo 29/08/2002, 12:57
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
NoSéNada:

ves en el ejemplo que te he puesto en el href algo así como <A HREF="#... ?

Pues cambia el '#' por la dirección a la que quieres ir. Por ejemplo <A HREF="http://www.sun.com"... o <A HREF="camino.html"...

es eso lo que querías, no?

y respecto al texto en archivo..

puedes hacer un archivo para cada variable. por ejemplo:

----------- lapiz.txt -----------
var lapiz="bla bla bla..."
---------------------------------

y luego poner en el código de la página:

<script src="lapiz.txt">
</script>

El resto quedaría igual.

pero no sé si te soluciona nada porque tiene que estar de todas formas en una línea...

No se me ocurre otra forma...
  #8 (permalink)  
Antiguo 29/08/2002, 13:47
 
Fecha de Ingreso: abril-2002
Mensajes: 16
Antigüedad: 22 años
Puntos: 0
Re: Enlaces de un lado..., texto del otro (o htm)
Gracias KarlanKas,

según lo que me dices, debería quedar así:

Código: 
<html>
<head>
<style>
...los estilos...
</style>

<title>Prueba</title>
<!-- <script language="JavaScript" type="text/javascript"> -->
<script src="lapiz.txt"></script>
<script src="boligrafo.txt"></script>
<script src="pluma.txt"></script>
<script src="rotulador.txt"></script>
<script src="defecto.txt"></script>
function cambio(texto){
document.getElementById('explicacion').innerHTML=texto;
}
</script>
</head>
<body onload="cambio(defecto)">
<table><tr><td><a href="pagina1.php" onmouseover="cambio(boligrafo)" onmouseout="cambio(defecto)">Bolígrafo</a></td>
<td rowspan="4" width=200 id="explicacion"> </td>
</tr>
<tr>
<td><a href="pagina2.php" onmouseover="cambio(pluma)" onmouseout="cambio(defecto)">Pluma</a></td>
</tr>
<tr>
<td><a href="pagina3.php" onmouseover="cambio(lapiz)" onmouseout="cambio(defecto)">Lápiz</a></td>
</tr>
<tr>
<td><a href="pagina4.php" onmouseover="cambio(rotulador)" onmouseout="cambio(defecto)">Rotulador</a></td>
</tr>
</table>
</body>
</html>
Los links funcionan, pero la página me tira este error:
Código: 
function cambio(texto){ document.getElementById('explicacion').innerHTML=texto; }
¿Sabes a que se debe?, yo puse cada variable tipo:
Código: 
var defecto="Pase el ratón por encima de las distintas posibilidades para ver su descripción.";
en los files separados y con el nombre respectivo (este por ej.: defecto.txt).

Gracias.
  #9 (permalink)  
Antiguo 30/08/2002, 06:12
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
A ver lo tienes así:

Código: 
<title>Prueba</title>
<!-- <script language="JavaScript" type="text/javascript"> -->  
<script src="lapiz.txt"></script>
<script src="boligrafo.txt"></script>
<script src="pluma.txt"></script>
<script src="rotulador.txt"></script>
<script src="defecto.txt"></script>
function cambio(texto){
document.getElementById('explicacion').innerHTML=texto;
}
</script>
y debe estar así:

Código: 
<title>Prueba</title>

<script src="lapiz.txt"></script>
<script src="boligrafo.txt"></script>
<script src="pluma.txt"></script>
<script src="rotulador.txt"></script>
<script src="defecto.txt"></script>
<script language="JavaScript" type="text/javascript">   
function cambio(texto){
document.getElementById('explicacion').innerHTML=texto;
}
</script>
A ver si es eso!
  #10 (permalink)  
Antiguo 30/08/2002, 13:06
 
Fecha de Ingreso: abril-2002
Mensajes: 16
Antigüedad: 22 años
Puntos: 0
Re: Enlaces de un lado..., texto del otro (o htm)
Gracias!!!,

Es eso nomás, un error de mi parte.

Dime, ¿es compatible este script con versiones 5 de IE y con Opera?

Saludos.
  #11 (permalink)  
Antiguo 30/08/2002, 13:20
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
Con IE 5.0 creo que sí. No debe tener ningún problema y con Opera... no sé. Después del último formateo del disco duro no lo volví a instalar... pruebalo y me cuentas!
  #12 (permalink)  
Antiguo 30/08/2002, 14:33
Avatar de KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 4 meses
Puntos: 61
Re: Enlaces de un lado..., texto del otro (o htm)
En Opera no funciona porque no reconoce el innerHTML... lo siento! PEro los usuarios de Opera son muy poquitos...
  #13 (permalink)  
Antiguo 31/08/2002, 12:34
Avatar de BooMeranGz  
Fecha de Ingreso: febrero-2001
Mensajes: 350
Antigüedad: 23 años, 2 meses
Puntos: 0
Re: Enlaces de un lado..., texto del otro (o htm)
Hola,

Te paso el code que suelo usar, seguro te servirá ya que con este no tienes que poner todo en una misma linea (va en 2 partes, no entra en 1 mensaje).

Salu2.

Código: 
<html>
<head>
<style>
}
a:link {color: #0066CC;	text-decoration: none;}
a:visited {color: #0066CC;text-decoration: none;}
a:active {color: #0066CC;text-decoration: none;}
a:hover {color: #0099FF;text-decoration: none;}
font {color: #0099FF;font-family:verdana,arial;font-size:11pt;}
</style>
</head>
<object width="94" height="16">
<param name=movie value="BooMeranGz.swf">
<param name=quality value=high>
<embed src="http://216.121.111.75/Webs/Firmas/BooMeranGz.swf" quality=high width="94" height="16">
</embed></object>
  #14 (permalink)  
Antiguo 31/08/2002, 12:35
Avatar de BooMeranGz  
Fecha de Ingreso: febrero-2001
Mensajes: 350
Antigüedad: 23 años, 2 meses
Puntos: 0
Re: Enlaces de un lado..., texto del otro (o htm)
Código: 
&lt;body&gt;
&lt;table width=&quot;653&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;2&quot;&gt;
  &lt;tr&gt; 
    &lt;td width=&quot;72&quot; valign=&quot;top&quot;&gt; &lt;div align=&quot;left&quot;&gt;
	    &lt;a href=&quot;pagina1.htm&quot; onmouseover=&quot;info1.style.display=''&quot; onmouseout=&quot;info1.style.display='none'&quot;&gt;Menu 
        1&lt;/a&gt;&lt;br&gt;
        &lt;a href=&quot;pagina2.htm&quot; onmouseover=&quot;info2.style.display=''&quot; onmouseout=&quot;info2.style.display='none'&quot;&gt;Menu 
        2&lt;/a&gt;&lt;br&gt;
        &lt;a href=&quot;pagina3.htm&quot; onmouseover=&quot;info3.style.display=''&quot; onmouseout=&quot;info3.style.display='none'&quot;&gt;Menu 
        3&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;
    &lt;td width=&quot;17&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt;&lt;/td&gt;
    &lt;td width=&quot;556&quot; align=&quot;left&quot; valign=&quot;top&quot;&gt; &lt;div id=&quot;info1&quot; style=&quot;display:'none'&quot; align=&quot;center&quot;&gt; 
        &lt;table width=&quot;556&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
          &lt;tr align=&quot;left&quot;&gt; 
            &lt;td width=&quot;278&quot; height=&quot;0&quot;&gt; &lt;p&gt;&lt;strong&gt; Menu 1&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr align=&quot;left&quot;&gt; 
            &lt;td width=&quot;278&quot; height=&quot;0&quot; valign=&quot;top&quot;&gt; &lt;p align=&quot;justify&quot;&gt;Bla.&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id=&quot;info2&quot; style=&quot;display:'none'&quot; align=&quot;center&quot;&gt; 
        &lt;table width=&quot;556&quot; height=&quot;0&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
          &lt;tr align=&quot;left&quot;&gt; 
            &lt;td width=&quot;278&quot; height=&quot;0&quot;&gt; &lt;p&gt;&lt;strong&gt; Menu 2&lt;/strong&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr align=&quot;left&quot;&gt; 
            &lt;td width=&quot;278&quot; height=&quot;0&quot; valign=&quot;top&quot;&gt; &lt;p align=&quot;justify&quot;&gt;Ble.&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id=&quot;info3&quot; style=&quot;display:'none'&quot; align=&quot;center&quot;&gt; 
        &lt;table width=&quot;556&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;
          &lt;tr align=&quot;left&quot;&gt; 
            &lt;td width=&quot;278&quot; height=&quot;0&quot;&gt; &lt;p&gt;&lt;strong&gt; Menu 3&lt;/strong&gt;&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr align=&quot;left&quot;&gt; 
            &lt;td width=&quot;278&quot; height=&quot;0&quot; valign=&quot;top&quot;&gt; &lt;p align=&quot;justify&quot;&gt;Bli.&lt;/p&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
<object width="94" height="16">
<param name=movie value="BooMeranGz.swf">
<param name=quality value=high>
<embed src="http://216.121.111.75/Webs/Firmas/BooMeranGz.swf" quality=high width="94" height="16">
</embed></object>
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:00.