Previsualizar enlace [SOLUCIONADO]

jvmjunior · #1 (**permalink**) 23/03/2010, 06:14

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.

Adler · #2 (**permalink**) 23/03/2010, 07:02

Hola

Cita:

Iniciado por jvmjunior

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

Panino5001 · #3 (**permalink**) 23/03/2010, 09:26

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:offsetLeft, top: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>

jvmjunior · #4 (**permalink**) 24/03/2010, 03:08

Gracias Panino5001 sos muy bueno!!

jvmjunior · #5 (**permalink**) 01/04/2010, 06:03

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.

Panino5001 · #6 (**permalink**) 01/04/2010, 08:39

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 i = 0; i < len; i++)
    {
      if (i in this)
        res[i] = fun.call(thisp, this[i], i, this);
    }

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

jvmjunior · #7 (**permalink**) 01/04/2010, 13:35

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.

Adler · #8 (**permalink**) 02/04/2010, 06:55

Hola

Así te resultará mas sencillo

Código Javascript:

Ver original<!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 type="text/javascript">
window.onload = function () {
ligas = document.getElementById('enlaces').getElementsByTagName('A');
    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 'mouseover':
        window.c=document.createElement('div');
                c.style.position='absolute';
                var pos=getElementPosition.call(this);
                c.style.left=pos.left+150+'px';
                c.style.top=pos.top+10+'px';
                c.style.padding='2px';
                c.style.border='1px solid #000';
                c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
                document.body.appendChild(c);
    break;
 
    case 'mouseout':
        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};
}
</script>
</head>
 
<body>
<div id="enlaces">
<a id="caricatos" href="http://www.caricatos.net/">caricatos.net</a><br />
<a id="forosweb" href="http://www.forosdelweb.com/">forosdelweb.com</a><br />
<a id="desweb" href="http://www.desarrolloweb.com/">desarrolloweb.com</a>
</div>
</body>
</html>

Suerte

PD: Espero que no te importe Panino

jvmjunior · #9 (**permalink**) 05/04/2010, 06:12

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!

FJVN · #10 (**permalink**) 25/06/2010, 16:37

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.

Adler · #11 (**permalink**) 26/06/2010, 03:59

Cita:

Iniciado por FJVN

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

FJVN · #12 (**permalink**) 29/06/2010, 10:00

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

Adler · #13 (**permalink**) 29/06/2010, 12:50

Hola

Del código anterior,

Cita:

ligas = document.getElementById('enlaces').getElementsByTa gName('IMG');

Después pnnle a tu tabla la id enlaces

Suerte

FJVN · #14 (**permalink**) 30/06/2010, 16:17

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ítulo</title>

<script type="text/javascript">

</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> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Adler · #15 (**permalink**) 01/07/2010, 03:37

Hola

Pues ni idea, no entiendo las funciones que genera DW

Suerte

FJVN · #16 (**permalink**) 01/07/2010, 11:11

ps nimodo, es lo malo de usar el DW, pero muchas gracias por intentar ayudarme.
eres muy bueno, quisiera aprender bastante, luego nos vemos

jvmjunior · #17 (**permalink**) 05/08/2010, 14:30

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

Así te resultará mas sencillo

Código Javascript:

Ver original<!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 type="text/javascript">
window.onload = function () {
ligas = document.getElementById('enlaces').getElementsByTagName('A');
    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 'mouseover':
        window.c=document.createElement('div');
                c.style.position='absolute';
                var pos=getElementPosition.call(this);
                c.style.left=pos.left+150+'px';
                c.style.top=pos.top+10+'px';
                c.style.padding='2px';
                c.style.border='1px solid #000';
                c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
                document.body.appendChild(c);
    break;
 
    case 'mouseout':
        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};
}
</script>
</head>
 
<body>
<div id="enlaces">
<a id="caricatos" href="http://www.caricatos.net/">caricatos.net</a><br />
<a id="forosweb" href="http://www.forosdelweb.com/">forosdelweb.com</a><br />
<a id="desweb" href="http://www.desarrolloweb.com/">desarrolloweb.com</a>
</div>
</body>
</html>

Suerte

Adler · #18 (**permalink**) 05/08/2010, 15:20

Hola

Modifica el top y left

Cita:

c.style.left=pos.left+150+'px';
c.style.top=pos.top+10+'px';

Suerte

jvmjunior · #19 (**permalink**) 09/08/2010, 06:42

Hola, gracias por contestar.....

Cita:

Iniciado por Adler

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.

Adler · #20 (**permalink**) 09/08/2010, 13:04

Hola

Como no tengo claro a que exactamente te refieres cuando hablas de centrar, prueba con esto

Código Javascript:

Ver original<!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 type="text/javascript">
window.onload = function () {
ligas = document.getElementById('enlaces').getElementsByTagName('A');
    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 'mouseover':
        window.c=document.createElement('div');
                c.style.position='absolute';
                var pos=getElementPosition.call(this);
                c.style.left=pos.left+'px';
                c.style.top=pos.top+'px';
                c.style.padding='2px';
                c.style.border='1px solid #000';
                c.innerHTML='<iframe width="500" height="300" frameborder="0" allowtransparency="true" src="'+this.href+'" />';
                document.body.appendChild(c);
    break;
 
    case 'mouseout':
        document.body.removeChild(window.c);    
                window.c=null;
    break;
    }
}
 
 
function getElementPosition() {
var offsetTrail = this;
var offsetLeft = 0;
var offsetTop = 0;
var window_height = ieNOTopera? iecompattest().clientHeight : window.innerHeight;
var window_width = ieNOTopera? iecompattest().clientWidth : window.innerWidth;
 
            while (offsetTrail.offsetParent) {
                   // offsetLeft += offsetTrail.offsetLeft;
                    offsetTop += offsetTrail.offsetTop;
                    offsetTrail = offsetTrail.offsetParent;
            }
 
offsetLeft = parseInt(((window_width) / 2) - 250); // menos mitad del width del iframa
 
if (offsetTop < window_height) {
offsetTop = parseInt(((screen.height) / 2) - 200);
}else {
offsetTop = (offsetTop /2 -100);
}
 
 
 
            return {left:offsetLeft, top:offsetTop};
}
 
 
 
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
function iecompattest() {
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
</script>
</head>
 
<body>
<div id="enlaces">
<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 />
<a id="forosweb" href="http://www.forosdelweb.com/">forosdelweb.com</a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a id="desweb" href="http://www.desarrolloweb.com/">desarrolloweb.com</a>
</div>
</body>
</html>

Suerte

jvmjunior · #21 (**permalink**) 09/09/2010, 08:49

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

jvmjunior · #22 (**permalink**) 09/09/2010, 09:17

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

http://www.forosdelweb.com/f13/efect...script-543536/

jvmjunior · #23 (**permalink**) 29/09/2010, 05:45

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

jvmjunior · #24 (**permalink**) 15/11/2010, 07:13

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.

IsaBelM · #25 (**permalink**) 15/11/2010, 14:06

ie impide que se ejecuten script o activex. lo que has de hacer es permite que ejecute ese contenido bloqueado

Panino5001 · #26 (**permalink**) 15/11/2010, 15:21

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 -->

IsaBelM · #27 (**permalink**) 15/11/2010, 16:07

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

Panino5001 · #28 (**permalink**) 15/11/2010, 20:40

Habría que ver un ejemplo con el que te pase. A mi no me sucede con explorer 8.

zerokilled · #29 (**permalink**) 15/11/2010, 21:05

@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.

IsaBelM · #30 (**permalink**) 16/11/2010, 05:22

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