redymension problematica

[debspain]

hola a todos!
Tengo un problemilla para redimensionar correctamente un conjunto de imagenes, de manera que si se produce el evento onmouseover encualquiera de ellas, la foto en cuestion aparece en forma de transicion encima de otra que es siempre fija. Y seguidamente cuando sacamos el mouse fuera, la foto vuelve a transicionar a la fija. EL caso es que hay imagenes que tienen diferentes anchuras, etc.., muuy diferentes, asi que el script que tenia hasta ahora no me sirve, pues en él le daba un ancho fijo a las imagenes y luego a partir de ahi proporcionalmente se le asignaba de forma automatica el height. Asi que en las fotos que son muy largas esto no me sirve, y no consigo sacar la solucion para que se me centren, la idea es que sean redimensionadas todas las que se pasen de un ancho establecido o de un height establecido, o de los dos, sin que se alteren proporcionalmente. Y lo malo es que no me es posible cambiar el tamaño original de ninguna de ellas... ¿Tiene alguien alguna idea? Gracias de antemano!!

[tunait]

Hola debspain,

mira a ver (si te he entendido bien) si este sript te sirve

http://javascript.tunait.com/javascr...sionarimagenes

un saludo

[debspain]

TUnait! MUchisimas gracias por el script! Y bueno, por tu página de javascripts también, es de gran ayuda. Lo dicho, me ha servido la parte de asignar los porcentajes que corresponden para redimensionar y lo de que con la capa escondida siempre se cargue la foto de nuevo, lo que ocurre es que he tenido que modificarlo porque el script no contempla la posibilidad de que aunque se redimensione la imagen, el valor que devuelva despues de haber asignado los porcentajes que corresponeden a la propiedad height o width sea igualmente mayor al máximo establecido. Así que, al final modificando esa parte funcionó: Aqui está el codigo (basándome en tu ejemplo) de esa parte:

document.ima1.src = cual;
if ((parseInt(ancho)>=maxAncho) || parseInt(alto)>=maxAlto)
{
if (ancho >= maxAncho)
{
porcientoAnchura = parseInt(maxAncho/ancho *100)
document.ima1.width = maxAncho
document.ima1.height = porcientoAnchura*alto/100
}
if (parseInt(ima1.height) >= maxAlto) /*Quité el else if por si se da el caso que te comentaba arriba, y cambié "alto" por ima1.height porque éste cambia si ha pasado por la primera condicion*/
{
porcientoAltura = maxAlto/alto*100
document.ima1 = maxAlto
document.ima1.width = porcientoAltura*ancho/100
}
}
else /*No se por qué pero si no ponía esto de abajo y ni el height ni el width de la imagen llegaban al máximo establecido, tomaba el tamaño de la foto anterior... */
{
document.ima1.height = alto
document.ima1.width = ancho
}

En el codigo anterior no sale reflejado pero mis imagenes cambian con una transicion, así que la llamada a la funcion cambia() de tu ejemplo, la apliqué a mi funcion de transicion, supongo que no habrá problemas con esto y por el codigo de arriba, ¿no?, solo dime qué es lo que debo poner en los créditos y lo haré. Lo digo porque como lo he modificado a mi gusto y tal..

Otro detallito que no se si tendrá solucion, tu me ayudaste con ese script, asi que igual sabes por qué ocurre. Justo cuando hay una transicion y redimension la imagen que aparece se centra en el centro (vertical y horizontalmente), pero la que desvanece se coloca justo en las coordenadas donde se coloca la nueva imagen que está apareciendo, asi que aun cuando la otra no ha acabado de desaparecer se ve como cambia de posicion y es muy desagradable. Sé que también es desagradable ver transiciones entre imagenes de diferentes tamaños, pero como es el deber, intento que sea de la mejor manera posible... En fin, un saludo y hasta pronto. Gracias Tunait!

[debspain]

tunait cuando puedas me dices que pongo ok?

[furoya]

Hola reinas :

tunait : qué simpática la foto de las palomas, me hizo mucha gracia.
debspain : ¿por qué siempre te metes en diseños complicados?. No tengo la intención de resolver tu problema, pero sí quisiera dejarte un par de sugerencias.

Leí tus mensajes, pero vi los códigos muy por encima, a la pasada; de cualquier forma, es obvio que hay una incompatibilidad ( seguramente por velocidades de máquina, bajada de archivos y/o el orden en que se ejecutan los escripts ) entre las partes del ajuste y de la transición. Por lo general, ésto ocurre cuando se modifica una parte del código sin integrarlo a los otros. No digo que alguien te vaya a ayudar mejor por 'postear' o quizá 'linkear' una página completa; pero si lo haces y nadie te resuelve todo el problema, al menos no vas a cargar con la culpa.

Vamos a especular. No creo que hagas la transición con blend, porque sólo funciona en el IExplorer sobre Windows. Mas bien creo que estás usando un filtro alpha + opacity que trabaja en IE, Netscape, Mozilla y, cuando se agregue al estándar, seguramente en Opera. También pongo una moneda a que para cambiar de foto utilizas el src, como en el código de tunait ( Ah!, tunait, me distraje con las palomas y olvidé felicitarte por el escript, está muy bueno ); y hasta temo que estés usando dos o tres funciones distintas para cambiar, ajustar y fundir las imágenes.

Vamos a las sugerencias ( NOTA : como unicamente conozco el Internet Explorer, puede que algún método que proponga no funcione en otros navegadores, pero tiene que haber una equivalencia o una forma de reemplazarlo, o al menos eso espero ). Lo primero que se me ocurre es no cambiar la imagen por el src sino con innerHTML; por supuesto habrá que meterla en, p.e., una tabla que la mantenga flotando en el centro de una celda; y en vez de darle alto y ancho a la imagen con ID, se le da a la imagen que está dentro de la celda con ID. El otro punto crítico es la transición. Lo mejor que se me ocurre es poner la foto por omisión delante y en la misma celda, con el tamaño máximo al que puedan aspirar las que son "elegibles", pero con z-index mayor; para que cuando esté opaca cubra las tramoyas de cambio y redimensión, y recién después comience a ponerse transparente. Cuando llegue a la opacidad "0", se va a ver la nueva imagen que quedó atrás como si fuera una transición. ( OTRA NOTA : leí que estás usando capas, pero no entendí si es para algo como ésto )

Por último. Los filtros funcionan en muchos navegadores, pero -como ya dije- no en todos. Si tienes ganas de trabajar un poco más, no uses 1 foto por omisión, sino 2. La primera, que se carga con la página, será un gif animado con la imagen fundiendo desde un color transparente; la segunda será igual, pero con el orden de los cuadros invertido, es decir : fundiendo desde la imagen a transparente. En vez de cambiar la opacidad, cambias la imagen; ya que los archivos .gif se ven en cualquier browser.

saludos

furoya

[tunait]

Hola

furoya, gracias por los comentarios (y especialmente por lo de reinas ).
E
La foto de las palomas me gusta mucho también, por eso aprovecho a jugar con ella en algunos scripts (adoro a esos bichos)

debspain te tengo abandonada, aimsorri pero llevo unos días en los que apenas dispongo de tiempo y por los foro me acerco a ver si hay que barrer algo nomás (moderar).

Me pongo en ello y te digo algo. Una pregunta ¿es para la página aquella del bustamante? la que lleva el efecto de transición con el blendtrans y todo eso??

[debspain]

Hola my friends!
Pues si, tunait, es para aquella página. Espero que no pilles manía a este post solo por eso jeje. Tengo que daros las gracias, porque aunque aun no he conseguido hacer todo lo me proponia furoya, pues voy haciendolo por partes, en realidad estoy aprendiendo mucho aunque solo sea practicando y probando (y ya no me peleo tanto con el javascript), asi que lo dicho, gracias por hacerme trabajar. Tambien queria comentar que la transicion la hacia con blendtrans (decepcionado furoya?? ), y aunque seguiré probando a ver que tal queda con alpha opacity, no me acaba de gustar como queda, así que igual probaré hacerlo con gifs animados. En fin, a ver si acabo pronto... chao y gracias!

[tunait]

Hola de niu,

respecto a lo de los créditos, pues pon lo típico de script original por tunait y la url de la página y adaptado por debspain, o algo así. De esta forma nos llevamos flores ambas dos

Volviendo al tema del blendtrans y eso.... ¿viste las presentaciones de imágenes que tengo en la página? creo que es la número 3 que imita el blendtrans pero sin usarlo. ¿ventajas? pues que también funciona en netscape y que todas las imágenes comparten un mismo centro. Blendtrans lo que tiene es que pone las imágenes alineadas a la izquierda, con lo que si las imágenes tienen distinto tamaño queda raro. En cambio si las imágenes comparten el centro queda algo mejor.

[debspain]

jelou!
TUnait, ya me estuve mirando tu script y bueno cambié la transicion para que lo hiciera con alpha y opacity tal como en tu ejemplo, y no se que hacer con el script pues se vuelve bastante loco, cuando se produce el onmouseover lo hace bien, pero con onmouseout como que se queda a medias.y no se porque... De todas formas, puede alguien sugerirme la mejor forma de hacerlo teniendo en cuenta que hay muchas fotos cargadas y que debe ser lo mas rapido posible que sea?
Thks!

[furoya]

Hola otra vez :

al final no me aguanté y tuve que hacerme una versión propia de tu slide-show para imágenes. ( ahora ya puedo dormir tranquilo )

Código:

 
<HTML>
<HEAD>
<SCRIPT>
var foto=new Array()
foto[0]=new Image()
foto[0].src=
"http://www.forosdelweb.com/images/smilies/adios.gif"
foto[1]=new Image()
foto[1].src=
"http://www.forosdelweb.com/images/home.gif"
foto[2]=new Image()
foto[2].src=
"http://www.forosdelweb.com/images/a/header_calendario.gif"
foto[3]=new Image()
foto[3].src=
"http://www.forosdelweb.com/images/a/logo_header.gif"
</SCRIPT>
<SCRIPT>
var tamanio;

function cambiar(im){
cont.filters.revealTrans.apply();
if(foto[im].width>foto[im].height){
tamanio=" width=300";};
else {tamanio=" height=300"};
v0.value=foto[im].width;
v1.value=foto[im].height;
nuevoCont="<table border=0 width=302 height=302 cellspacing=0>"+
"<td align=center><img src="+foto[im].src+tamanio+"></td></table>";
cont.innerHTML=nuevoCont;
cont.filters.revealTrans.play();
}

</SCRIPT>
</HEAD>
<BODY>
<center>
<div id=cont style="filter:revealTrans(transition=12 , duration=4); 
width:310px; height:310px; background:
url('http://www.forosdelweb.com/images/a/right_bottom.gif')">
</div>
<p>
<input /*onclick="cambiar(0)"*/ onmouseover="cambiar(0)" height=30 type=image src=
"http://www.forosdelweb.com/images/smilies/adios.gif">
<input /*onclick="cambiar(1)"*/ onmouseover="cambiar(1)" height=30 type=image src=
"http://www.forosdelweb.com/images/home.gif">
<input /*onclick="cambiar(2)"*/ onmouseover="cambiar(2)" height=30 type=image src=
"http://www.forosdelweb.com/images/a/header_calendario.gif">
<input /*onclick="cambiar(3)"*/ onmouseover="cambiar(3)" height=30 type=image src=
"http://www.forosdelweb.com/images/a/logo_header.gif">
 _ Ancho original : <input id=v0 size=4> _ 
Alto original : <input id=v1 size=4>
</center>

</BODY>
</HTML>

Si cambias transition=12 por transition=23 , cada vez que alguien visite la página se va a encontrar con un nuevo efecto de transición; y si estás haciendo el documento para IE5.5 tienes algunas posibilidades más, como abrir la nueva imagen con efecto de estrella, cruz, aspas... ( te dejo un enlace para que las veas )

¿Cómo resuelves el tema de que el usuario mueva el puntero hacia la barra de desplazamiento, o de dirección, o de tareas, y no dispare una imagen por accidente? . Tal vez sea mejor usar onclick en vez de onmouseover .

Es una lástima que no pongas un link a la página -seguramente temes que lo consideren spam- , tenía curiosidad por saber el por qué de la imposibilidad para cambiar el tamaño de las imágenes.

saludos

furoya


http://msdn.microsoft.com/library/de...er/filters.asp

[debspain]

Hola furoya!!
Que hay de nuevo?
He de pedirte perdon por tardar tanto en responder, no es que haya pasado de tí ni nada por el estilo, es que no quería hacerme pesada para decir que lo estaba intentando acabar. Pues bien, despues de querer mejorar algunas cosillas mas, acabo de terminar ya el script, todo a la perfeccion, al final dejé el blendtrans, bueno el tipo de transicion es lo de menos, pero el caso es que añadiendo el innerHTML y pasando de cambiarle el src a la imagen ya se me redimensiona correctamente, y no hace aquellas tonterias que hacia de colocarse en las coordenadas donde debia aparecer la imagen siguiente.
Ah! me preguntabas por qué eso de onmouseover y no onclick, pues bien, en principio es más bien una cuestion de "comodidad" (?), no se si es la palabra adecuada, pero vaya, el caso es que me dijeron que si se hacia debia ser asi. Al final no creo que se ponga en la web, pues hay muchas fotos y tarda mucho en cargar, pero da igual porque como ya dije voy aprendiendo mucho a cada paso, auqnue parezca pequeño, asi que da igual.
Muchisimas gracias por ayudarme furoya!