Foros del Web » Programando para Internet » Javascript »

Previsualizar enlace [SOLUCIONADO]

Estas en el tema de Previsualizar enlace [SOLUCIONADO] en el foro de Javascript en Foros del Web. Hola, no sé si será posible hacer esto con JavaScript.... que al pasar el cursor sobre el enlace me permita previsualizar en un pequeño recuadro ...

  #1 (permalink)  
Antiguo 23/03/2010, 06:14
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
De acuerdo Previsualizar enlace [SOLUCIONADO]

Hola, no sé si será posible hacer esto con JavaScript.... que al pasar el cursor sobre el enlace me permita previsualizar en un pequeño recuadro la página a la que lleva el enlace

Gracias de antemano.

Saludos.

Última edición por jvmjunior; 24/03/2010 a las 03:09 Razón: Tema solucionado
  #2 (permalink)  
Antiguo 23/03/2010, 07:02
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace

Hola

Cita:
Iniciado por jvmjunior Ver Mensaje
Hola, no sé si será posible hacer esto con JavaScript.... que al pasar el cursor sobre el enlace me permita previsualizar en un pequeño recuadro la página a la que lleva el enlace

Gracias de antemano.

Saludos.
Javascript trabaja del lado del cliente. Podrías ingeniarte algo con el objeto server.createObject("Microsoft.XMLHTTP") para ASP o con file_get_contents() para PHP

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 23/03/2010, 09:26
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Previsualizar enlace

Otra manera sería con un iframe o un popup:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title></title>
<
script>
function 
getElementPosition() {
        var 
offsetTrail this;
        var 
offsetLeft 0;
        var 
offsetTop 0;
        while (
offsetTrail) {
            
offsetLeft += offsetTrail.offsetLeft;
            
offsetTop += offsetTrail.offsetTop;
            
offsetTrail offsetTrail.offsetParent;
        }
        return {
left:offsetLefttop:offsetTop};
}
function 
t(id){return document.getElementById(id);}
function 
prev(en){
    
t(en).onmouseover=function(){
        
window.c=document.createElement('div');
        
c.style.position='absolute';
        var 
pos=getElementPosition.call(t(en));
        
c.style.left=pos.left+10+'px';
        
c.style.top=pos.top+50+'px';
        
c.style.padding='2px';
        
c.style.border='1px solid #000';
        
c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+t(en).href+'" />';
        
document.body.appendChild(c);
    }
    
t(en).onmouseout=function(){
        
document.body.removeChild(window.c);    
        
window.c=null;
        
    }
        
}
onload=function(){prev('pepe');}
</script>
</head>

<body>
<a id="pepe" href="http://www.caricatos.net/">caricatos.net</a>
</body>
</html> 

Última edición por Panino5001; 23/03/2010 a las 09:32
  #4 (permalink)  
Antiguo 24/03/2010, 03:08
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
De acuerdo Respuesta: Previsualizar enlace [SOLUCIONADO]

Gracias Panino5001 sos muy bueno!!

  #5 (permalink)  
Antiguo 01/04/2010, 06:03
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola Panino5001,

Estuve analizando el código q me enseñaste para poder adaptarlo a mi aplicación, el problema es que la línea de código:
Cita:
onload=function(){prev('pepe');}
es la que da la orden que cuales enlaces se podran previsualizar y esta hecho de forma predeterminada.

En mi aplicación, q se trata de un buscador, los enlaces se cargan dinámicamente, por tanto, esa línea de código no sé como llenarla dinámicamente para poder incluir todos los enlaces obtenidos en el resultado de la búsqueda

Gracias por tu ayuda,
Saludos.
  #6 (permalink)  
Antiguo 01/04/2010, 08:39
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Previsualizar enlace [SOLUCIONADO]

Bueno, no te costará mucho generar un array que contenga los ids de cada enlace que quieras afectar con esta función:
Código PHP:
var enlaces =['idenlace1','idenlace2','idenlace3']; 
Luego podés afectarlos de esta manera:
Código PHP:
if (!Array.prototype.map)
{
  Array.
prototype.map = function(fun /*, thisp*/)
  {
    var 
len this.length >>> 0;
    if (
typeof fun != "function")
      throw new 
TypeError();

    var 
res = new Array(len);
    var 
thisp arguments[1];
    for (var 
0leni++)
    {
      if (
i in this)
        
res[i] = fun.call(thispthis[i], ithis);
    }

    return 
res;
  };
}
var 
enlaces =['idenlace1','idenlace2','idenlace3'];
onload=function(){enlaces.map(prev);} 

Última edición por Panino5001; 01/04/2010 a las 08:45
  #7 (permalink)  
Antiguo 01/04/2010, 13:35
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Ahora completamente perdido :(

Me permites enviarte los pequeños archivos q tengo del programa para aclararte mi pregunta??

Mi correo es [email protected] , porfavor escribeme para q te envíe a tu correo los archivos.

Muchas gracias por tu atención.

Saludos.
  #8 (permalink)  
Antiguo 02/04/2010, 06:55
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola

Así te resultará mas sencillo

Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. ligas = document.getElementById('enlaces').getElementsByTagName('A');
  9.     for(i= 0; i < ligas.length; i++) {
  10.         ligas[i].onmouseover = prev;
  11.         ligas[i].onmouseout = prev;
  12.     }  
  13. }
  14.  
  15.  
  16. function prev(evento){
  17. var evento = evento || window.event;
  18.     switch(evento.type) {
  19.     case 'mouseover':
  20.         window.c=document.createElement('div');
  21.                 c.style.position='absolute';
  22.                 var pos=getElementPosition.call(this);
  23.                 c.style.left=pos.left+150+'px';
  24.                 c.style.top=pos.top+10+'px';
  25.                 c.style.padding='2px';
  26.                 c.style.border='1px solid #000';
  27.                 c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
  28.                 document.body.appendChild(c);
  29.     break;
  30.  
  31.     case 'mouseout':
  32.         document.body.removeChild(window.c);    
  33.                 window.c=null;
  34.     break;
  35.     }
  36. }
  37.  
  38.  
  39. function getElementPosition() {
  40. var offsetTrail = this;
  41. var offsetLeft = 0;
  42. var offsetTop = 0;
  43.             while (offsetTrail) {
  44.                     offsetLeft += offsetTrail.offsetLeft;
  45.                     offsetTop += offsetTrail.offsetTop;
  46.                     offsetTrail = offsetTrail.offsetParent;
  47.             }
  48.             return {left:offsetLeft, top:offsetTop};
  49. }
  50. </script>
  51. </head>
  52.  
  53. <body>
  54. <div id="enlaces">
  55. <a id="caricatos" href="http://www.caricatos.net/">caricatos.net</a><br />
  56. <a id="forosweb" href="http://www.forosdelweb.com/">forosdelweb.com</a><br />
  57. <a id="desweb" href="http://www.desarrolloweb.com/">desarrolloweb.com</a>
  58. </div>
  59. </body>
  60. </html>

Suerte

PD: Espero que no te importe Panino
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #9 (permalink)  
Antiguo 05/04/2010, 06:12
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Muy bueeeno Adler!!!, simplemente tuve que ponerle
Cita:
<div id='enlaces'> codigooo </div>
a lo que engloba los enlaces y listo....funcionó muy bien!!!

el unico problema con el que me encuentro es con los enlaces q estan en la parte inferior de la pantalla, no se pueden previsualizar bien por que el recueadro crece hacia abajo y al mover la pantalla se desenfoca el cursor del enlace y por tanto desaparece el recuadro.

INFINITAMENTE AGRADECIDOS A USTEDES!!!... Panino y Adler!
  #10 (permalink)  
Antiguo 25/06/2010, 16:37
 
Fecha de Ingreso: junio-2010
Mensajes: 4
Antigüedad: 14 años
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Apenas hoy supe de la existencia de esta pagina, y me gusto tanto que decidi inscribirme.

Muchas gracias por sus aportes, que para nosotros los novatos nos sirven muchisimo.

Por ahora tengo una duda: Como puedo hacer para que este codigo funcione dentro de una tabla??? he intentado acoplarlo al proyecto que estoy desarrollando y no puedo hacerlo, con las tablas. No se si lleve algo extra, o sea diferente. Lles agradesco mucho su ayuda... Saludos.
  #11 (permalink)  
Antiguo 26/06/2010, 03:59
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace [SOLUCIONADO]

Cita:
Iniciado por FJVN Ver Mensaje
Por ahora tengo una duda: Como puedo hacer para que este codigo funcione dentro de una tabla??? he intentado acoplarlo al proyecto que estoy desarrollando y no puedo hacerlo, con las tablas.
¿A qué te refieres?

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #12 (permalink)  
Antiguo 29/06/2010, 10:00
 
Fecha de Ingreso: junio-2010
Mensajes: 4
Antigüedad: 14 años
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Primeramente muchas gracias por prestar atencion a mi peticion.

Lo que pasa es que tengo 100 imagenes (las cuales funcionan como link) dentro de una tabla de 10 * 10, y lo que quiero hacer es que en todas tenga la funcion de la previsualizacion, pero no he podido lograrlo. Lo he intentado de mil formas y no lo puedo hacer, por eso necesito su ayuda.

Muchas gracias
  #13 (permalink)  
Antiguo 29/06/2010, 12:50
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola

Del código anterior,
Cita:
ligas = document.getElementById('enlaces').getElementsByTa gName('IMG');
Después pnnle a tu tabla la id enlaces

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #14 (permalink)  
Antiguo 30/06/2010, 16:17
 
Fecha de Ingreso: junio-2010
Mensajes: 4
Antigüedad: 14 años
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Ps lo intento de muchas formas y nomas no puedo, checa el codigo porfa y dime donde tengo el error, este es solo un ejemplo de lo que quiero hacer...

Disculpa tanta molestia y muchas gracias.
Veo que soy novato y tengo muchisimo que aprender, gracias por su ayuda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<script type="text/javascript">
<!--
window.onload = function () {

ligas = document.getElementById('enlaces').getElementsByTa gName('IMG');
for(i=0; i<ligas.length; i++) {
ligas[i].onmouseover = prev;
ligas[i].onmouseout = prev;
}
}


function prev(evento){
var evento = evento || window.event;
switch(evento.type) {
case 'onmouseover':
window.c=document.createElement('div');
c.style.position='absolute';
var pos=getElementPosition.call(this);
c.style.left=pos.left+100+'px';
c.style.top=pos.top+100+'px';
c.style.padding='2px';
c.style.border='1px solid #000';
c.innerHTML='<iframe width="250" height="150" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
document.body.appendChild(c);
break;

case 'onmouseout':
document.body.removeChild(window.c);
window.c=null;
break;
}
}


function getElementPosition() {
var offsetTrail = this;
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return {left:offsetLeft, top:offsetTop};
}






function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>



</head>

<body onload="MM_preloadImages('ba.png')">
<table id="enlaces" width="10" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a id="Image1" href="Paseo de la fama estrellas 1.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','paseo de la fama/ba.png',1)"><img src="Paseo de la fama/ba 1.png" name="Image1" width="64" height="63" border="0" id="Image1" /></a></td>
<td><a id="Image2" href="Paseo de la fama estrellas 2.htm" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','paseo de la fama/ba.png',1)"><img src="paseo de la fama/ba 1.png" name="Image2" width="64" height="63" border="0" id="Image2" /></a></td>
</tr>
<tr>
<td><a id="Image3" href="paseo de la fama estrellas 3.htm" ><img src="paseo de la fama/boton estrellas 1.png" width="119" height="69" border="0" /></a></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>
  #15 (permalink)  
Antiguo 01/07/2010, 03:37
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola

Pues ni idea, no entiendo las funciones que genera DW

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #16 (permalink)  
Antiguo 01/07/2010, 11:11
 
Fecha de Ingreso: junio-2010
Mensajes: 4
Antigüedad: 14 años
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

ps nimodo, es lo malo de usar el DW, pero muchas gracias por intentar ayudarme.
eres muy bueno, quisiera aprender bastante, luego nos vemos
  #17 (permalink)  
Antiguo 05/08/2010, 14:30
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola...sigo trabajando en este proyectito y retomando el tema...

¿Como puedo hacer para que el iFrame se muestre siempre en el centro de la pantalla??

-> Ya que al mostrar más de 50 resultados en 3 columnas, la previsualización de los resultados del lado derecho no los puedo previsualizar, y tener que hacer un IF para cada coordenada no me parece correcto, sólo si no existiera más solución ;) <-

Muchas gracias de antemano

Cita:
Iniciado por Adler Ver Mensaje

Así te resultará mas sencillo

Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. ligas = document.getElementById('enlaces').getElementsByTagName('A');
  9.     for(i= 0; i < ligas.length; i++) {
  10.         ligas[i].onmouseover = prev;
  11.         ligas[i].onmouseout = prev;
  12.     }  
  13. }
  14.  
  15.  
  16. function prev(evento){
  17. var evento = evento || window.event;
  18.     switch(evento.type) {
  19.     case 'mouseover':
  20.         window.c=document.createElement('div');
  21.                 c.style.position='absolute';
  22.                 var pos=getElementPosition.call(this);
  23.                 c.style.left=pos.left+150+'px';
  24.                 c.style.top=pos.top+10+'px';
  25.                 c.style.padding='2px';
  26.                 c.style.border='1px solid #000';
  27.                 c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
  28.                 document.body.appendChild(c);
  29.     break;
  30.  
  31.     case 'mouseout':
  32.         document.body.removeChild(window.c);    
  33.                 window.c=null;
  34.     break;
  35.     }
  36. }
  37.  
  38.  
  39. function getElementPosition() {
  40. var offsetTrail = this;
  41. var offsetLeft = 0;
  42. var offsetTop = 0;
  43.             while (offsetTrail) {
  44.                     offsetLeft += offsetTrail.offsetLeft;
  45.                     offsetTop += offsetTrail.offsetTop;
  46.                     offsetTrail = offsetTrail.offsetParent;
  47.             }
  48.             return {left:offsetLeft, top:offsetTop};
  49. }
  50. </script>
  51. </head>
  52.  
  53. <body>
  54. <div id="enlaces">
  55. <a id="caricatos" href="http://www.caricatos.net/">caricatos.net</a><br />
  56. <a id="forosweb" href="http://www.forosdelweb.com/">forosdelweb.com</a><br />
  57. <a id="desweb" href="http://www.desarrolloweb.com/">desarrolloweb.com</a>
  58. </div>
  59. </body>
  60. </html>

Suerte
  #18 (permalink)  
Antiguo 05/08/2010, 15:20
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola

Modifica el top y left
Cita:
c.style.left=pos.left+150+'px';
c.style.top=pos.top+10+'px';
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #19 (permalink)  
Antiguo 09/08/2010, 06:42
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola, gracias por contestar.....

Cita:
Iniciado por Adler Ver Mensaje
Hola

Modifica el top y left

Suerte
modificando esas variables tendría que hacerlo para cada coordenada de cada resultado, imagina con mas de 50 resulatos puestos en 3 columnas!

Existe alguna forma automática para poner siempre en el centro el iFrame?, o algun método que me devuelva siempre el centro de la pantalla para modificar esas variables con el centro de la panatalla??


Saludos.
  #20 (permalink)  
Antiguo 09/08/2010, 13:04
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola

Como no tengo claro a que exactamente te refieres cuando hablas de centrar, prueba con esto
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript">
  7. window.onload = function () {
  8. ligas = document.getElementById('enlaces').getElementsByTagName('A');
  9.     for(i= 0; i < ligas.length; i++) {
  10.         ligas[i].onmouseover = prev;
  11.         ligas[i].onmouseout = prev;
  12.     }  
  13. }
  14.  
  15.  
  16. function prev(evento){
  17. var evento = evento || window.event;
  18.     switch(evento.type) {
  19.     case 'mouseover':
  20.         window.c=document.createElement('div');
  21.                 c.style.position='absolute';
  22.                 var pos=getElementPosition.call(this);
  23.                 c.style.left=pos.left+'px';
  24.                 c.style.top=pos.top+'px';
  25.                 c.style.padding='2px';
  26.                 c.style.border='1px solid #000';
  27.                 c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
  28.                 document.body.appendChild(c);
  29.     break;
  30.  
  31.     case 'mouseout':
  32.         document.body.removeChild(window.c);    
  33.                 window.c=null;
  34.     break;
  35.     }
  36. }
  37.  
  38.  
  39. function getElementPosition() {
  40. var offsetTrail = this;
  41. var offsetLeft = 0;
  42. var offsetTop = 0;
  43. var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
  44. var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;
  45.  
  46.             while (offsetTrail.offsetParent) {
  47.                    // offsetLeft += offsetTrail.offsetLeft;
  48.                     offsetTop += offsetTrail.offsetTop;
  49.                     offsetTrail = offsetTrail.offsetParent;
  50.             }
  51.  
  52. offsetLeft = parseInt(((window_width) / 2) - 250); // menos mitad del width del iframa
  53.  
  54. if (offsetTop < window_height) {
  55. offsetTop = parseInt(((screen.height) / 2) - 200);
  56. }else {
  57. offsetTop = (offsetTop /2 -100);
  58. }
  59.  
  60.  
  61.  
  62.             return {left:offsetLeft, top:offsetTop};
  63. }
  64.  
  65.  
  66.  
  67. var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
  68. function iecompattest() {
  69.     return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
  70. }
  71. </script>
  72. </head>
  73.  
  74. <body>
  75. <div id="enlaces">
  76. <a id="caricatos" href="http://www.caricatos.net/">caricatos.net</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  77. <a id="forosweb" href="http://www.forosdelweb.com/">forosdelweb.com</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  78. <a id="desweb" href="http://www.desarrolloweb.com/">desarrolloweb.com</a>
  79. </div>
  80. </body>
  81. </html>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #21 (permalink)  
Antiguo 09/09/2010, 08:49
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Necesito aplicarle algún efecto a la apertura del iframe, para q no se muestre un cuadro vacío mientras se carga la página.

He probado con Mootools (http://demos.mootools.net/Effects#) pero no lo consigo :(

Alguien sabe porfavor algún efecto para aplicar al iframe???

Muchas gracias de antemano :D
  #22 (permalink)  
Antiguo 09/09/2010, 09:17
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Es increíble que tampoco me funciona esto que parece más sencillo :(

http://www.forosdelweb.com/f13/efect...script-543536/
  #23 (permalink)  
Antiguo 29/09/2010, 05:45
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Como puedo hacer que se vea siempre el iframe en el centro aunque baje el scroll??

Algo asi como lo que ocurre al entrar a esta página a abre una ventanita de registro:

http://asistencia.foroactivo.com/forum.htm

que muestra una ventana siempre al centro de la pantalla, si bajo o subo el scroll igual se acomodo automáticamente la ventana mostrada en el centro de la pantalla.

No sé si será posible eso con el iframe.

Saludos
  #24 (permalink)  
Antiguo 15/11/2010, 07:13
 
Fecha de Ingreso: marzo-2009
Mensajes: 62
Antigüedad: 15 años, 2 meses
Puntos: 0
Respuesta: Previsualizar enlace [SOLUCIONADO]

Hola, este tema es muy dificil encontrarlo en Internet y por eso vuelvo a preguntar aqui.

Bueno, mi pregunta es si se puede hacer funcionar este código en Internet Explorer, ya lo he probado en todos los navegadores pero justo en el navegador más utilizado no me funciona. O conocen alguna otra alternativa para esta misma funcionalidad en Internet Explorer???

Gracias de antemano.
Saludos.
  #25 (permalink)  
Antiguo 15/11/2010, 14:06
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: Previsualizar enlace [SOLUCIONADO]

ie impide que se ejecuten script o activex. lo que has de hacer es permite que ejecute ese contenido bloqueado
  #26 (permalink)  
Antiguo 15/11/2010, 15:21
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Previsualizar enlace [SOLUCIONADO]

Internet Explorer impide la ejecución de scripts y ActiveX fuera de un servidor web. En un servidor web no presentará problemas. Y si quiere impedirse el bloqueo fuera de un servidor web, basta con agregar esto a continuación del tag body:
Código PHP:
<body>
<!-- 
saved from url=(0013)about:internet --> 
  #27 (permalink)  
Antiguo 15/11/2010, 16:07
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: Previsualizar enlace [SOLUCIONADO]

no nada importante, pero cuando lo ejecuto fuera del servidor, continua apareciendo el aviso. aunque utilice lo que indicas. lo pruebo en ie8, puede eso tener algo que ver??

gracias
  #28 (permalink)  
Antiguo 15/11/2010, 20:40
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Previsualizar enlace [SOLUCIONADO]

Habría que ver un ejemplo con el que te pase. A mi no me sucede con explorer 8.
  #29 (permalink)  
Antiguo 15/11/2010, 21:05
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 1 mes
Puntos: 1485
Respuesta: Previsualizar enlace [SOLUCIONADO]

@panino, es un buen detalle! no tenia idea el proposito de ese comentario html. siempre pense que estaba ahi de mas por capricho de iexplorer. acabo de realizar una prueba y efectivamente anula las restrincciones locales.

@edit: estaba buscando informacion sobre dicho detalle, el cual se llama Mark of the Web (MOTW), en msdn pueden leer mas acerca de ello.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Última edición por zerokilled; 15/11/2010 a las 21:33
  #30 (permalink)  
Antiguo 16/11/2010, 05:22
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: Previsualizar enlace [SOLUCIONADO]

lo he probado con este
edito: solucionado. el problema era que el largo de la cadena es 14 y no 13

Última edición por IsaBelM; 16/11/2010 a las 05:29

Etiquetas: enlace, previsualizar
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

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 14:12.