Ampliar fotos!!!

Hola a todos!!!
Estoy haciendo una galería de fotos pero en ves de que allá que oprimir sobre la foto para verla y que me lleve a una pagina donde esta la foto en tamaño origina quiero que al posicionar el Mouse arriba aparezca la foto grande sin cargar otra pagina….
Este efecto lo vi en:
Ver...
fijence que cuando se pociciona sobre una imagen, la carga en su tamaño original…

salu2 a todos y espero su pronta respuesta

Por lo que he estado viendo en el código fuente es un script en javascript.

El script es este:
(lo guerdas con el nombre que quieras)

Código :

/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.

var defaultimageheight = 40;   // maximum image size.
var defaultimagewidth = 40;   // maximum image size.

var timer;

function gettrailobj(){
if (document.getElementById)
return document.getElementById("preview_div").style
}

function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("preview_div")
}


function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function hidetrail(){   
   gettrailobj().display= "none";
   document.onmousemove=""
   gettrailobj().left="-500px"
   clearTimeout(timer);
}

function showtrail(imagename,title,width,height){
   i = imagename
   t = title
   w = width
   h = height
   timer = setTimeout("show('"+i+"',t,w,h);",200);
}
function show(imagename,title,width,height){
 
    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]
   var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

   if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {
      ( width == 0 ) ? width = defaultimagewidth: '';
      ( height == 0 ) ? height = defaultimageheight: '';
         
      width+=30
      height+=55
      defaultimageheight = height
      defaultimagewidth = width
   
      document.onmousemove=followmouse; 

      
      newHTML = '<div class="border_preview" style="width:'+  width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';
      newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'
      
       newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';
      newHTML = newHTML + '</div>'; 
      
      if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){
         newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';
      }      

      gettrailobjnostyle().innerHTML = newHTML;
      gettrailobj().display="block";
   }
}

function followmouse(e){

   var xcoord=offsetfrommouse[0]
   var ycoord=offsetfrommouse[1]

   var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
   var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

   if (typeof e != "undefined"){
      if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){
         xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor
      } else {
         xcoord += e.pageX;
      }
      if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){
         ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));
      } else {
         ycoord += e.pageY;
      }

   } else if (typeof window.event != "undefined"){
      if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){
         xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor
      } else {
         xcoord += truebody().scrollLeft+event.clientX
      }
      if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){
         ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
      } else {
         ycoord += truebody().scrollTop + event.clientY;
      }
   }
   gettrailobj().left=xcoord+"px"
   gettrailobj().top=ycoord+"px"

}

Debes llamarlo así en el head de tu web:

Código :

<script src="script.js" language="JavaScript" type="text/javascript"></script>

Y debes utilizarlo así en el sitio que quieras:

Código :

<a style="cursor: hand" href="http://www.la_pagina_que_quieras.com" target="_blank">
   <IMG SRC="imagen_pequeña.jpg" border=0  border=1 style="border-color: 777777" onmouseover="showtrail('imagen_grande.jpg','nombre_de_la_imagen',anchura_en_pixeles,altura_en_pixeles)"   onmouseout="hidetrail()">
</a>

Lo que no está explicado doy por hecho que lo sabes, pero si tienes dudas lo preguntas,ok?? No me ha dado tiempo a probarlo, pero estoy casi seguro que es así. Además me ha gustado la idea, lo añadiré a mi recopilación...
Saludos!

Gracias por responder Johnny... probe hacer lo que me dijiste pero no me funciona..
en el .htm puse esto:

Código :

<script src="efecto.js" language="JavaScript" type="text/javascript"></script>
<a style="cursor: hand" href="#"> <IMG SRC="../carpeta 1/carpeta 2/foto chica/Foto 1.jpg" border=1 style="border-color: 777777" onmouseover="showtrail('./carpeta 1/carpeta 2/foto grande/Foto 1.jpg','MI FOTO',640,480)"   onmouseout="hidetrail()">
</a>

y copie tal cual mandaste el archivo .js

incluso puse el contenido del .js en el .htm (porque a lo mejor no cargaba correctamente) pero nada...

espero por sus ayudas!!!
salu2

creo que es por la ruta a la imágen grande, le falta un punto, voy a hacer las pruebas y las cuelgo en mi server

aquí va un ejemplo, no está terminado, pero espero que sirva
ver
zip

Gracias Johnny me funciono bien pero una cosita cuando estas sobre la imagen aparece la imagen grande eso esta bien pero si la imagen grande esta sobre la imagen pequeña aparece y desaparece es decir la imagen pequeña tiene la acción de que cuando el Mouse esta sobre ella aparezca la imagen grande y que cuando el Mouse se retira la imagen grande desaparezca pero cuando la imagen grande aparece se superpone con la imagen pequeña y se ejecuta la acción para hacer desaparecer la imagen grande.. .. lo que genera un interminable proceso de parpadeo en la imagen grande…

Lo puedes ver en la fotito derecha de tu ejemplo… o sino alinéalas al centro de la pagina y vas a ver como hace… yo mucho no entiendo por lo que no se por donde empezar a buscar el error…

A por cierto tu web esta muy buena

si, te explico, el script está hecho para que cuando el mouse esté encima de la imágen aparezca la otra, y para que cuando lo retires desaparezca.
La imágen grande se sitúa en una div creada por javascripr, cuya id es border_preview, en el css te vienen definido con los valores position:absolute y unas determinadas distancias en la página.

Código :

.border_preview{
   z-index:100;
   position:absolute;
   top:10px;
   left:150px;
   background:#EEEEEE;
   border: 1px solid #444444;
}

Editando las posiciones top, left,bottom y right, podrás adaptar su situación, aunque te digo una cosa, los valores top y left, se los he añadido yo porque no me funcionaba en ese momento y decidí dejarle una posicion fija, ya que en realidad debería seguir al raton en el eje horizontal, así que si tienes maquetada la página prueba a quitar esos valores, o a darle un z-index:90 a las fotos y un z-index:100 a la foto grande, es cuestión de experimentar.
Lo del preloader es algo que me tiene un poco mosca, ya que debería funcionar correctamente, de todas formas recuerdo que una vez alguien preguntó por él y Kemie Guaida le dio el link exacto de los creadores. Lo que no sé es el sitio, pero puedes buscar por aquí:
Lista ovillo
Doméstika
Diseñorama
Juraría que fué en doméstika, pero por si acaso te he dado esos links

estoy perdido jejeje... como pongo para que la imagen grande siga el cursor ... la verdad no tengo idea.

Código :

.border_preview{
   z-index:100;
   top:10px; // que es lo que tendria que poner aca???
   left:150px; // que es lo que tendria que poner aca???
   position:absolute;
   background:#E8F5FF;
   border: 1px solid #0099FF;
}

No recuerdo bien, pero creo que quitando el "position:absolute" y dejando el "top" y "left" digamos en 10px debe pegarse del cursor

Nada sale!!! busque en google para ver si encontraba algo relacionado pero nada...

Y si en vez de ponerlo en absoluto lo pones de forma normal para que el contenedor se amplie con el tamaño de la imagen?
Si haces eso, lo mejor seria poner la imagen grande debajo de las chicas. Saludos.

ok Gracias por ayudarme voy a intentar hacer lo que me dijeron

salu2 a todos!!!!

hola Johnny..
no tendras los archivos disponibles para poder descargarlos nuevamente.. gracias!!

Hola

He visto el efecto de la ampliacion de la imagen y estoy intentado utilizarlo para una pequeña pagina en la cual estoy trabajo (llevo poco tiempo en este mundillo).
He copiado el js tal cual viene como usted indica y he añadido el resto de lineas, la linea para llamar al js y las lineas donde se especifica la imagen, lo que me sucede es que cuando paso por encima de la imagen me da un error javascript indicandome que "se requiere un objeto" en la siguiente funcion, este objeto "preview_div" no se si tengo q crearlo en algun sitio o se crea dinamicamente

function gettrailobj(){
if (document.getElementById)
return document.getElementById("preview_div").style
}



Muchas gracias

En Javascript, ahi estas diciendo que encuentre el elemento con id "preview_div", y luego te diga que estilos tiene. Si el #preview_div no existe, no funcionará.