Imagen en el mismo lugar de los tumbails

[oops1]

Qué tal? Pues eso, en esta página, tengo unos tumbails, y al picar sobre ellos me gustaría que se abrieran justo en el lugar donde están los tumbails, y no como en el ejemplo de la segunda foto, donde desaparece por completo la página original y se abre la página de la foto. El código es un tanto lioso, pero está generado por un programa, por lo cual no consigo dar con la clave, he probado con targets, pero no me funcionan. ¿Tendré que hacerlo en javascript? Había oído algo de las "anclas" para fijar el link a una celda determinada, pero no tengo ni la más remota idea. Si alguien con un poco de paciencia puede responderme... Gracias

[caricatos]

Hola oops1:

Para reemplazar una imagen por otra, tienes que cambiar el atributo src de la imagen...

Lo puedes hacer inline de esta manera:

<img src=mini.gif onclick="this.src='maxi.gif'">

Si no le pones los atributos width y height, debería modificarse el tamaño automáticamente.

Saludos

[oops1]

Gracias caricatos, pero no logro hacer que funcione, verás, utilizo el programa "Web al dia", y éste creo que inserta páginas dentro de otras, incluye javascripts y css, por lo que al final me hago un lio total (sin haberlo deseado me ha salido un pareado). Para crear las galerías, utilizo el "Gena Web Gallery", que me crea los thumbails con el efecto al pasar por encima el ratón, el código html, y las fotos al tamaño elegido en una nueva html con los botones de atrás, siguiente, etc... ejemplo luego este código lo inserto en el editor de "Web al dia". De este modo, la solución que me comentas no me funciona, no sé si es por el css o por la estructura del código o yo que sé, hasta ahora el resto de la página era perfecta para mi gusto, pero con lo de las imágenes me he estancado. Si ves alguna solución, pues... yo no doy más de sí, he probado a cambiar de mil formas, si no lo consigo, tendré que replantearme hacerlo de otra manera. Gracias por aguantar el tostón, saludos

[tunait]

Hola oops1,

la verdad es que alterar el código generado por un programa suele ser complicado y en muchos casos, inefectivo.

Te sugiero dos opciones:

Trasladar tu pregunta al foro de Editores de sitios web en donde quizás alguien que haya trabajado con el programa que dices usar pueda orientarte.

O bien te sugiero que hagas tu galería de fotos a base de código (con javascript no es dificil) en cuyo caso trasladaría tu pregunta al foro de javascript.

Tu dirás

un saludo

[oops1]

Gracias tunait, he estado leyendo un par de post de javascript en los que participáis caricatos y tú y me ha parecido muy interesante esta manera, creo que me decantaré por esto, solo hay que leer un "poquitín" y probar mucho. Me pondré en ello y os haré saber el resultado, gracias de nuevo, saludos

[tunait]

No hay de qué,

entonces voy a trasladar tu pregunta al foro de javascript.

Si ves por ahí algo que te guste y quieras aplicar pues nos los dices y con gusto de ayudamos

Un saludo

[caricatos]

Hola oops1 (Hola tunait ):

Si te podemos ayudar en algo, avisa...

Saludos

[oops1]

Gracias tunait y gracias caricatos. Veréis, leyendo en uno de los post, he adaptado un javascript de caricatos y éste es el resultado. Es "casi" perfecto, como veréis, he conseguido insertar el javascript en el html sin que se desmonte del todo la página
Ahora el más difícil todavía ¿sería posible añadir éste efecto? Yo mientras tanto sigo intentándolo. Lo dicho, que muchas gracias por vuestra incondicional ayuda, saludos

PD: Se me olvidaba, abajo me sale el icono de error en la página ¿algún consejo?

[caricatos]

Hola oops1:

Tengo que felicitarte por un par de cosas:

En primer lugar por lo bien que has adaptado el script. Debo decirte que me siento orgulloso de ese código... y a pesar de que no estoy usándolo actualmente en mi página, estoy trabajando en ello y lo haré muy pronto... (ahora estoy trabajando en un script que permita enviar la foto por correo electrónico, te lo comento por si en un futuro te lo planteas )

La segunda de las razones para felicitarte, es por la página.

... Y ahora te daré las respuestas:

Sobre el efecto, me he fijado y se trata del clásico rollover, o sea intercambio de imágenes.
Para adaptar el código habría que poner un parámetro más al objeto Foto (function Foto) para indicar la imagen de reemplazo, o tal vez pueda interesarte usar un filtro "alfa" que consiste en darle más o menos intensidad (opacidad) a las fotos (además, puede implementarse en explorer y netscape)

Sobre el error encontré dos en explorer pero se trata de que has copiado la función resalte que tendrías que quitar, igual que la "llamada" en el tag body...

... y el otro error (me lo mostró netscape) es que has copiado la función línea que es un script aparte que yo suelo usar porque genera lineas en colores compatibles con netscape, pero me imagino que no tienes el código.

En resúmen:

Si quieres te paso lo de las líneas (si te interesa)... y según como quieras adaptar el script, avisa para ponernos a trabajar...

Por último, tal vez no te responda inmediatamente, porque en estos días tengo algunos compromisos, pero pueden ser muy válidas las respuestas que puedan darte otros colaboradores.

Infórmanos de tus avances...

Saludos

[oops1]

Pues muchas gracias de nuevo caricatos, he solucionado lo de los errores en la página. Lo de las lineas ¿es imprescindible para poder ver correctamente la web? Debería instalarme otros navegadores aparte del explorer para poder hacer las pertinentes comprobaciones. En cuanto a los filtros y demás para el efecto rollover me pongo ahora mismo a leer por el foro a ver que tal y os informo de nuevo de los progresos.
Gracias también por tu felicitación sobre la web, la verdad es que está muy muy verde y no tiene montado ni la décima parte del contenido, hay mucho material en papel por "transformar" y subir, la actual ya está muy anticuada y sin actualizar. Lo dicho, que muchas GRACIAS (voy a desgastar estas 6 teclas ) Saludos

[caricatos]

Hola otra vez:

En primer lugar, lo de las líneas es un script que simula la etiqueta hr, pero en explorer se puede colorear, y en netscape no... por eso lo que hace es poner una tabla con una celda del color que quieras. Puse algo parecido en las FAQs html.

Lo de probar las páginas en otros navegadores te lo recomiendo, aunque sabemos que el más usado es explorer, creo que sería injusto que los usuarios de otros navegadores, no vean bien las páginas... Yo suelo probarlas en netscape y opera.

Cuando decidas la forma de hacer el efecto (en el ejemplo que mostraste se trataba de rollover), avisa para orientarte en la forma de modificar el script, pero te adelanto que se trata de ampliar el script con el uso de los eventos onmouseover y onmouseout.

Saludos

[oops1]

Qué tal? Pues he estado trasteando con el script, pero lo único que consigo es que desaparezca todo, he buscado en los foros y en google, pero no he dado con la clave. La cuestión es que la página ya lleva el efecto rollover (el menú son imágenes que varían al pasar el ratón por encima), con lo cual tan solo habría que añadir las imágenes thumbnails al código, pero en esto estoy bastante verde. Si me podéis echar un cable, aunque sea escribiéndome el código para la primera imagen, ya haría yo el resto. Gracias como siempre por vuestro tiempo, saludos

[caricatos]

Hola:

Como no sé como tienes el código, te diré los pasos a seguir:

En el objeto foto, tendrías que poner un parámetro más que se correspondería con la imagen de intercambio...
function Foto(imagen, ancho,... nueva )
(el nombre es lo de menos)...

y en la galería tienes que poner algo así:

visor += "<img src=" + fotos[i].mini;
visor += " onclick=mostrar('" + fotos[i].imagen + "')";

visor += " onmouseover='this.src = " + fotos[i].nueva + "' ";
visor += " onmouseout='this.src = " + fotos[i].mini + "' ";
visor += ...

La verdad es que no sé muy bien si son los nombres reales de las variables, pero esperos que entiendas el código...

Saludos

[oops1]

Qué tal? Pues no sé hacerlo caricatos, te escribo el cóadigo del archivo .js
var cursy = (document.all) ? "hand" : "pointer";

function mostrar(imagen, ancho, alto, titulo) {
var posX = screen.width / 2 - ancho / 2;
var posY = screen.height / 2 - alto / 2;
var losDatos = "<html><head><title>" + titulo;
losDatos += "</title></head><body onclick='self.close()'><img src='"+ imagen + "' style='";
losDatos += "position:absolute;cursor:" + cursy + ";width:" + ancho + ";height:" + alto + ";top:0;left:0'

/></body></html>"
var propi = "width=" + ancho + "px,height=" + alto + "px,left=" + posX + ",top=" + posY;// + "'";
var popup = window.open("", "", propi);
popup.document.write(losDatos);
}

function Foto(imagen, ancho, alto, mini, miniancho, minialto, descri, titulo, link, titu, nueva) {
this.imagen = imagen;
this.ancho = ancho;
this.alto = alto;
this.mini = mini;
this.miniancho = miniancho;
this.minialto = minialto;
this.descri = descri;
this.titulo = titulo;
this.link = link;
this.titu = titu;
}

function galeria(fotos) {//var cursy = (document.all) ? "hand" : "pointer";
var posX, posY;
var visor = "<table cellpadding=5 cellspacing=15><tr>";
for (var i = 0; i < fotos.length; i ++) {if (i % 3 == 0) visor += "</tr><tr>";
posX = 46 - fotos[i].miniancho / 2 - 2;
posY = 46 - fotos[i].minialto / 2 - 2;
visor += "<td style='margin:0 25 0 0'></td><td><table width=100><tr><td

width=100height=100><div class=diapo>";
visor += "<img style='cursor:" + cursy;

visor += "<img src=" + fotos[i].mini;
visor += " onclick=mostrar('" + fotos[i].imagen + "')";

visor += " onmouseover='this.src = " + fotos[i].imagen + "' ";
visor += " onmouseout='this.src = " + fotos[i].mini + "' ";

visor += ";border-width:2;border-style:inset;position:absolute";
visor += ";top:" + posY + "px;left:" + posX + "px' src='" + fotos[i].mini;

visor += "' width='" + fotos[i].miniancho;
visor += "' height= '" + fotos[i].minialto;
visor += "\", " + fotos[i].ancho;
visor += ", " + fotos[i].alto;
visor += ", \"" + fotos[i].titu;
visor += "\")' title='" + fotos[i].descri + "' ></div></td></tr><tr><td>";
visor += fotos[i].descri;
visor += "<br><span class=rojo>" + fotos[i].titulo;
visor += "</span><span class=verde>" + fotos[i].link + "</span></td></tr></table></td>";
}
visor += "</tr></table>";
return visor;
}

var sones = [
"../risas/CHIPLAFF.au",
"../risas/COMIC1.au",
"../risas/COMIC2.au",
"../risas/HILARIOU.au",
"../risas/MALEHARD.au",
"../risas/SNORTY.au",
"../risas/WLAUGH.au"
];

function sonar() {
var sonido = Math.round(Math.random() * (sones.length - 1));
document.getElementById("fantasma").innerHTML = "<embed src=" + sones[sonido] + " hidden=true

>";
}

Creo que la parte correspondiente al sonido podría eliminarla no?
La nueva página me da error. Ya no sé que más tocar, cada vez me sale lo mismo. Gracias

[caricatos]

Hola oops1:

Paso a paso...
En primer lugar, tendrías que poner el valor nueva en la función foto:

function Foto(imagen, ancho, alto, mini, miniancho, minialto, descri, titulo, link, titu, nueva) {
this.imagen = imagen;
this.ancho = ancho;
this.alto = alto;
this.mini = mini;
this.miniancho = miniancho;
this.minialto = minialto;
this.descri = descri;
this.titulo = titulo;
this.link = link;
this.titu = titu;
this.nueva = nueva;
}

la imagen en miniatura normal, es "mini" y la que está más resaltada es "nueva", y la ampliada es "imagen"...

visor += " onmouseover='this.src = " + fotos[i].nueva + "' ";
visor += " onmouseout='this.src = " + fotos[i].mini + "' ";

Lo de los sonidos puedes quitarlo, y puede ser una causa de error si no tienes definido un tag con id="fantasma"...

Con esos cambios debería funcionar...

De todos modos, voy a tener un par de días ocupado, pero en cuanto esté más tranquilo me dedicaré un poco más.

Saludos

[oops1]

Qué tal? Pues nada, después de mil cambios (debidos a mi inutilidad para esto), no conseguí dar con la clave y perdí lo que tenía conseguido entre los cientos de nuevos archivos que creé, así que desisto de lo que pretendía. Por otra parte he conseguido algo similar que os muestro en
http://www.nikkacosta-fans.com/gallery/gallery3.html
el primer popup se abre al tamaño indicado, pero si no cierro el popup, las siguientes fotos no se abren en el tamaño indicado, sino que en el tamaño del primer popup. Esto creo que será de más fácil solución, ¿tal vez algún script para que se cierre el popup al volver a pulsar la página? Vosotros más sabios diréis, gracias y disculpad todos los quebraderos de cabeza, saludos

[caricatos]

Hola oops1:

Lo que dices que has perdido, tal vez esté en este mismo post...
Si quieres empezarlo de nuevo, con los datos que puedas rescatar, cuenta conmigo...

He visto el enlace nuevo, y veo que es un cambio radical...
Por un par de días voy a estar algo ocupado, pero en cuanto pueda, te seguiré ayudando.

Saludos