Javascript que visualice en grande una foto ...

En primer lugar agradecerte la desinteresada labor que llevas a cabo y la paciencia que tienes con todos nosotros...
Mira, estoy tratando de crear una página web de coleccionismo relativamente sencilla. Uno de mis objetivos es incluir una pequeña galería de fotos en la que en principio solo se listen una serie de artículos ( piensa en una lista de de artículos representados por una fotito muy pequeña que permita tomar una primera idea ).
Ahora imaginate que clicko en una de esas fotitos en miniatura con la intención de acceder a una ficha detallada del item en cuestión, donde además de obtener una serie de características ( tantos campos como yo desee contemplar en la ficha ) deseo incluir fotos adicionales del item desde diferentes puntos o ángulos de visión ... Pues bien, mi intención es la de hacerme con un javaScript que permita que, con sólo pasar por encima de cada una de las fotitos adicionales en miniatura el puntero del ratón, se pueda ir visualizando rápidamente cada foto en un tamaño más o menos aceptable sin necesidad de clickar una a una en cada foto adicional, salirme de la página de la ficha ralentizando así la navegación ...
Te indico a modo de orientación lo que más o menos ando buscando; navegando de casualidad en la siguiente página:
http://www.grupoalhambra.com/automoviles_km0.htm
Se me ha encendido la bombilla y he pensado que es una solución curiosa para aplicarla en mi diseño web (por favor, accede a la ficha de cualquier vehículo que tenga fotos para entender que tipo de javascript busco ). El problema es que yo no tengo ni idea de javascript, y o soy muy torpe o no puedo copiarme el código del javascript que usa en la página que te he indicado anteriormente.
A ver si me puedes pasar tú un javascript igual o mejor. Te lo agradecería de veras.
Por cierto, ¿es fácil incluir un pequeño video (apenas unos segundos en los que de tiempo a grabar todos los ángulos y perspectivas del item )para que así el visitante tenga unas referencias exactas del producto? ¿Sería además possible que ese pequeño video orientativo se visualizara en miniatura (p. Ej con el QuickTime o similar ) dentro de una pequeña celda de la tabla html que serviría para representar cada una de las fichas técnicas del producto? ...¿Tienes algún ejemplo en código para hacer esto?
También. Me gustaría saber cómo podría mostrar por pantalla el resultado de una consulta a una Bd de n en n registros, de forma que, p.ej en cada pantallazo sólo aparezcan 10 registros ... Pudiendo acceder a los 10 siguientes registros con un 'siguientes' en la parte inferior de la tabla de resultados.
Esta última cuestión si quieres la dejamos para otra ocasión, pues aunque estoy leyendo libros y haciéndome cosillas pequeñas en jsp para acceder a una BD access, no tengo ni idea de como resolver el problema que te planteo y que es muy típico en casi todas las webs ( quizás tengas código de ejemplos ).
Oye, muchas gracias de antemano y disculpa el compromiso, pero se ve que te apasiona el reto de compartir tus conocimientos, y creo que somos muchos los que te lo agradecemos.

1 Respuesta

Respuesta
1
Kapitann t he estado mirando lo del javascript que m pides y creo que ya lo tengo, lamentablemente lo del video nunk lo he probado y respecto a lo de la BD hac poco que m he iniciado con MySQL y todavía m queda mucho por aprender, pero bueno guardare tu mensaje y m pondré a trabajar en ello, ¿ok?
Bueno al grano t tengo preparados dos códigos que son facilitos de configurar así que no t asustes. El primero t lo dejo con lo que es el visor en si y el segundo t lo dejo con el diseño que tiene la página que m dijiste por si quieres copiar alguna cosilla, je je.
T he añadido la posibilidad de añadir dos fotos más que en la de los coches aunque luego t explico como añadir más, junto con el resto de la configuración.
Bueno vamos a por los códigos
CODIGO SIMPLE V.I.->
Dentro del HEAD
------------------------------
<!-- kapitannn coloca este código en el HEAD -->
<!-- Javascript por gentileza de "CHEM" -->
<!-- Proximamente en la red: www.3zona.miarroba.com -->
<script language="javascript">
function movepic(img_name,img_src,mi) {
document.images['foto1'].border=0
document.images['foto2'].border=0
document.images['foto3'].border=0
document.images['foto4'].border=0
document.images['foto'+mi].border=2
document[img_name].src=img_src;
}
function fotogrande(matri)
{
matri = document.images['foton'].src;
pos = matri.indexOf("fo");
largo = matri.length
matri = matri.substring(0,pos)+"fotogrande"+matri.substring(pos+9,largo)
imagen_win=window.open(matri,'colaboran','height=500 ,width=660,scrollbars=no,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function Error_Cargar() {
window.event.srcElement.style.display = "None";
}
</script>
------------------------------
Dentro del BODY
------------------------------
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="27%" id="AutoNumber1" height="1">
<tr>
<td width="100%" colspan="4" height="13" bgcolor="#EEEEEE">
<p align="center"><font size="2">Javascript por gentileza de "CHEM"</font></td>
</tr>
<tr>
<td width="100%" colspan="4" height="180"><a HREF="javascript:fotogrande('5092AVW')">
<img name="foton" src="imagen1.jpg" OnError="Error_Cargar()" WIDTH="250" HEIGHT="176" align="absmiddle" vspace="2" border="0" alt="Click para ampliar"></a></td>
</tr>
<tr>
<td width="24%" height="41"><a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen1.jpg','1')">
<img NAME="foto1" SRC="imagen1.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
<td width="24%" height="41"> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen2.jpg','2')">
<img NAME="foto2" SRC="imagen2.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
<td width="26%" height="41"> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen3.jpg','3')"><img NAME="foto3" SRC="imagen3.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
<td width="26%" height="41"> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen4.jpg','4')"><img NAME="foto4" BORDER="0" SRC="imagen4.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
</tr>
</table>
------------------------------
CONFIGURACION:
1) El HEAD no hace falta que lo toques a no ser que quieras añadir más imágenes, pero bueno pasemos a lo más importante, la configuración de las imágenes, para ello vete al BODY y fíjate en
------------------------------
<img name="foton" src="imagen1.jpg" OnError="Error_Cargar()" WIDTH="250" HEIGHT="176" align="absmiddle" vspace="2" border="0" alt="Click para ampliar"></a></td>
</tr>
<tr>
<td width="24%" height="41"><a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen1.jpg','1')">
<img NAME="foto1" SRC="imagen1.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
<td width="24%" height="41"> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen2.jpg','2')">
<img NAME="foto2" SRC="imagen2.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
<td width="26%" height="41"> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen3.jpg','3')"><img NAME="foto3" SRC="imagen3.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
<td width="26%" height="41"> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen4.jpg','4')"><img NAME="foto4" BORDER="0" SRC="imagen4.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
------------------------------
Lo unico q tienes q hacer es cambiar imagen1.jpg, imagen2.jpg, imagen3.jpg, imagen4. Jpj por las respectivas direcciones d las imagenes q quieras meter.
2)Si quieres implementar la opción de que al cliquear en la imagen se te maximice la misma en una nueva ventana, lo más fácil que puedes hacer es crear una página con esta ventana maximizada e insertar el link en la magen correspondiente.
Mensaje al pasar por encima de la imagen
------------------------------
ALT="Click para ampliar"
------------------------------
IMPORTANTE: Si no quieres tener esta opción debes quitar todas las lineas de la forma
------------------------------
a HREF="javascript:fotogrande('5092AVW')"
------------------------------
3) Si quieres introducir más fotos lo que tienes que hacer es crear más celdas en la tabla y dentro de esta poner el siguiente código
------------------------------
<td width="26%" height="41"> <onmouseover="movepic('foton','imagen_n.jpg','n')"><img NAME="foto_n" SRC="imagen_n.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a></td>
------------------------------
Donde n es el numero de foto que toca (en nuestro caso seria el 5)
Y despues d esto t tendrias q ir al HEAD y añadir una o mas lineas dependiendo d la ampliacion q quieras hacer de la forma
------------------------------
document.images['foto_n'].border=0
------------------------------
Si quisiéramos poner una más de las que tenemos ( seria la 5) el HEAD quedaría así
------------------------------
<script language="javascript">
function movepic(img_name,img_src,mi) {
document.images['foto1'].border=0
document.images['foto2'].border=0
document.images['foto3'].border=0
document.images['foto4'].border=0
document.images['foto5'].border=0
document.images['foto'+mi].border=2
document[img_name].src=img_src;
}
function fotogrande(matri)
{
matri = document.images['foton'].src;
pos = matri.indexOf("fo");
largo = matri.length
matri = matri.substring(0,pos)+"fotogrande"+matri.substring(pos+9,largo)
imagen_win=window.open(matri,'colaboran','height=500 ,width=660,scrollbars=no,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function Error_Cargar() {
window.event.srcElement.style.display = "None";
}
</script>
------------------------------
Bueno y con esto termino todo el chorizo. Espero que t funcione y cualquier dudilla que tengas m escribs, ¿ok?
Gracias x hacerm una explicacion tan detallada y sabs q puedes contar conmigo cuando quieras
Ah! T dejo el otro código con el diseño de la página que m dijiste que ya se m olvidaba, je je
Aya va
Dentro del HEAD
------------------------------
<script language="javascript">
function movepic(img_name,img_src,mi) {
document.images['foto1'].border=0
document.images['foto2'].border=0
document.images['foto3'].border=0
document.images['foto4'].border=0
document.images['foto'+mi].border=2
document[img_name].src=img_src;
}
function fotogrande(matri)
{
matri = document.images['foton'].src;
pos = matri.indexOf("fo");
largo = matri.length
matri = matri.substring(0,pos)+"fotogrande"+matri.substring(pos+9,largo)
imagen_win=window.open(matri,'colaboran','height=500 ,width=660,scrollbars=no,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function Error_Cargar() {
window.event.srcElement.style.display = "None";
}
function abrircerti()
{
imagen_win=window.open('../garantia/certificado.htm','certificado','height=500 ,width=617,scrollbars=yes,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function abrirgara()
{
imagen_win=window.open('../garantia/garantia.htm','garantia','height=680 ,width=619,scrollbars=yes,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function abrirsoli()
{
imagen_win=window.open('solicitud.htm','solicitud','height=580 ,width=620,scrollbars=yes,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
</script>
<title>Ficha tecnica</title>
</head>
<!-- Tutorial Lesson - ADO Connection -->
<script language="javascript">
function movepic(img_name,img_src,mi) {
document.images['foto1'].border=0
document.images['foto2'].border=0
document.images['foto3'].border=0
document.images['foto4'].border=0
document.images['foto'+mi].border=2
document[img_name].src=img_src;
}
function fotogrande(matri)
{
matri = document.images['foton'].src;
pos = matri.indexOf("fo");
largo = matri.length
matri = matri.substring(0,pos)+"fotogrande"+matri.substring(pos+9,largo)
imagen_win=window.open(matri,'colaboran','height=500 ,width=660,scrollbars=no,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function Error_Cargar() {
window.event.srcElement.style.display = "None";
}
function abrircerti()
{
imagen_win=window.open('../garantia/certificado.htm','certificado','height=500 ,width=617,scrollbars=yes,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function abrirgara()
{
imagen_win=window.open('../garantia/garantia.htm','garantia','height=680 ,width=619,scrollbars=yes,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
function abrirsoli()
{
imagen_win=window.open('solicitud.htm','solicitud','height=580 ,width=620,scrollbars=yes,left=0,top=0,menubar=no,location=no,resizable=no,toolbar=no');
imagen_win.focus();
}
</script>
------------------------------
Dentro del BODY
------------------------------
<body topmargin="0" leftmargin="0">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75%" bgcolor="#000080" height="50" valign="top"><font face="Verdana" color="#FFFFFF">AUDI  A3 2.0 D TDI AMBITION 3P ** Km 0 **</font></td>
<td width="25%" bgcolor="#000080" colspan="1" valign="top"><p align="right"> </td>
</tr>
</table>
<table width="550" bgcolor="#000080" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="600" border="0" cellspacing="1" cellpadding="2">
<tr>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Primera matriculación:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>2003
</b></font></td>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Color exterior:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>GRIS LAVA
</b></font></td>
</tr>
<tr>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Combustible:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>DIESEL
</b></font></td>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Kilometraje:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>0000
km</b></font></td>
</tr>
<tr>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Cilindrada:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>2.0
cm³</b></font></td>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><a href="javascript:abrirgara()" style="text-decoration: none; color: rgb(0,0,0)"><font face="Verdana" size="1">Garantía:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>24
meses</b></font></td>
</tr>
<tr>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Potencia:</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1"><b>140
cv </b></font></td>
<td width="25%" bgcolor="#ffffff" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Precio (incluido IVA):</font></td>
<td bgcolor="#DEDEDE" style="border: 0px solid rgb(0,0,128)"><strong><font face="Verdana" size="1">26399 Euros</font></strong></td>
</tr>
<tr>
<td BGCOLOR="#ffffff" VALIGN="TOP" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Fotografía:</font></td>
<td COLSPAN="3" BGCOLOR="#DEDEDE" VALIGN="top" ALIGN="center" style="border: 0px solid rgb(0,0,128)"></a><a HREF="javascript:fotogrande('5092AVW')">
<img name="foton" src="imagen1.jpg" OnError="Error_Cargar()" WIDTH="250" HEIGHT="176" align="absmiddle" vspace="2" border="0" alt="Click para ampliar"> </td>
</tr>
<tr>
<td BGCOLOR="#ffffff" VALIGN="TOP" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Galería de fotos:</font></td>
<td COLSPAN="3" BGCOLOR="#DEDEDE" VALIGN="top" ALIGN="center" style="border: 0px solid rgb(0,0,128)"></a><a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen1.jpg','1')">
<img NAME="foto1" SRC="imagen1.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen2.jpg','2')">
<img NAME="foto2" SRC="imagen2.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen3.jpg','3')"><img NAME="foto3" SRC="imagen3.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a> <a HREF="javascript:fotogrande('5092AVW')" onmouseover="movepic('foton','imagen4.jpg','4')"><img NAME="foto4" BORDER="0" SRC="imagen4.jpg" ALT="Click para ampliar" WIDTH="57" HEIGHT="45" BORDER="0" Onerror="Error_Cargar()"></a> </td>
</tr>
<script languaje="javascript">
</script>
<tr>
<td bgcolor="#ffffff" valign="top" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Equipamiento:</font></td>
<td BGCOLOR="#DEDEDE" valign="top" colspan="3" style="border: 0px solid rgb(0,0,128)"><font face="Verdana" size="1">Aire acondicionado, Llantas, Radiocasette, Elevalunas eléctricos 2, Cierre centralizado, ABS, Airbags 6 o mas, Dirección asistida, Climatizador</font></td>
</tr>
<tr>
<td colspan="4"><p align="center"><font face="Verdana" size="1"><strong><a href="http://www.lapoliza.com/home.jsp?cdbrk=0078938778&cr=2" style="text-decoration: none; color: rgb(255,239,198)" target="_blank">Calcula tu seguro
</a><a href="javascript:abrircerti()" style="text-decoration: none; color: rgb(255,239,198)">Certificado de calidad</a></strong></font></td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top"><font face="Verdana" size="1">Contacto: </font></td>
<td colspan="3" bgcolor="#ffffff" valign="top"><font face="Verdana" size="1"><strong><a href="javascript:abrirsoli()" style="text-decoration: none">¿Quiere más información?</a></strong></font></td>
</tr>
</table>
</td>
</tr>
</table>
<p>
------------------------------
Ok listo
La configuración es la misma que t muestro en el otro mensaje solo cambia el estilo
**************CHEM************
De momento muchísimas gracias por tu rápida respuesta. Te pido disculpas por haber tardado más que tú en agradecerte el interés ...
Dame un día o así para ponerme con el material que me has pasado a ver si me funciona ( ando algo liado con trabajo ).
De momento te valoro la respuesta como excelente por el detalle de ser tan rápido.
Hablamos.
Saludos y gracias.
Kapitannn

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Abrir popup con flash

Intento abrir un popup con flash cuando aprienten un botón, pero no funciona. He encontrado un código dentro de internet, el caso es que me bajo un archivo de prueba y funciona correctamente, pero lo abro en flash (mi version es falsh 2004 mx) i lo...
2 respuestas

Abrir una nueva ventana usando Javascript

Tu ayuda me ha sido de gran utilidad, pero ahora estoy intentando de pasarle a la función también los parámetros de ancho y alto y no me funciona, a ver si me puedes decir algo: <html> <head><script language="JavaScript"> function...
3 respuestas

Abrir ventanas sin barras ni botones.

Me gustaría desde mi página hecha en flash abrir varias ventanas sin barras y de distintos tamaños. Yo consigo abrir una ventana de 100 *100 pero la siguiente se abre dentro de esta y no me cambia el tamaño de la nueva ventana a abrir, debo cerrar la...
1 respuesta

He diseñado una página en HTML pero tengo algunos problemas con los links.

1) Duda sobre el primer problema: me gustaría que en esta página "Inicio.htm" que me sugieres, no haga falta que haya un link hacia mi página "Favorito.htm" sino que cuando se cargue la misma ("Inicio.htm") convoque automáticamente a la otra...
1 respuesta

Ventana que se abre con javascript (difícil)

Tengo un problema que nadie consigue solucionarme, he preguntado a muchos expertos, pero nadie sabe como hacerlo. Tengo una página web, donde hay imágenes pequeñas y quiero que al pulsar sobre ellas se abra otra ventana con las dimensiones que yo...
3 respuestas

¿Cómo puedo hacer un pop up sobre las referencias de una base de datos en Javascript?

Tengo la siguiente programación que consulta una base de dato y luego al hacer click en la referencia se abre una ventana con los detalles de esdte registro, ¿Cómo puedo abrir un POP UP de las dimensiones que yo quiero desde esta programación? Una...
2 respuestas

¿Páginas emergentes?

Tengo una página web en la cual cuando click en un link me abre otra ventana para mostrarme una pequeña ayuda. ¿Cómo hago que esta nueva ventana se muestre del tamaño que yo necesite y no tenga los menús ni los iconos del IExplorer? ¿Y qué al hacer...
2 respuestas

Sin barras de navegación

Necesitoc crear un link que abra una ventana sin barras de navegación ni de links, se que mediante java se pueden quitar esas barras y creo que también en html
1 respuesta

Web sin barras

Desde Madrid: He cr¡Eado un informe en formato web con dos frames y varios menús desplegables, estoy intentando crear un código que me permita abrir por defecto la página sin que me aparezca ninguna barra de herramientas ni de desplazamiento, es...
3 respuestas

Ventanas flotantes

Estoy interesado en la manera de hacer ventanas flotantes para mostrar información adicional como imagenes o texto, pero necesito saber como se maneja y como se coloca las coordenadas para ubicar a dicha ventana flotante.
1 respuesta