imagenes

[Essftg]

Hola necesito saber como hago, teneindo una foto a tamaño 160*241 y con dos peuqeñas fotos debajo de 25*25 cuando pase el raton por encima de las pequeñas se me ponga esa foto y cuando pase el raton por la otra pequeñas se me ponga esa y todo esto tira atraves de asp con bases de datos. La foto 160*241 la tengo <img src="<%= strImage %>" border="0" align="top">, y las pequeñas <a href="#" onClick="MM_openBrWindow('<%= strImage01 %>','image','width=400,height=601','resizable=no,s crollbars=no')"><img src="<%= strcolor01 %>" alt="Pinche para ver la imagen en grande" border="0" align="top" marginwidth="0" leftmargin="0"></a></div>, es q necesito q cuando hagas un click para agrandar la foto salga en una pantalla y po eso he puesto #, pq no se muy bien como hacerlo pq todo tira a taves de base de datos.

Si alguien me puede ayudar se lo agradeceria.

[Myakire]

La neta, no te entendí. Ojalá pudieras redactar de nuevo tu pregunta/solicitud de una forma más clara.

[CésarBalaguer]

La idea es esta...
Usando el onMouseOver en las imàgenes 25x25 desde el lado cliente llamas a una funciòn donde asignes al src de la imagen 160x241 el src de la imagen donde esta posicionado el mouse (25x25)

<!--
<img id=foto160x241 src="foto grande" onClick=.........>
<img id=foto25x25 src="foto pequeña" onMouseOver="javascript:cambiaimagen(this);">

<script language="javascript">
function cambiaimagen(imagen){
var fotogrande = document.getElementById("foto160x241");
fotogrande.src=imagen.src;
}
</script>
-->

[Essftg]

una cosa q no me queda muy clara, este es mi codigo
Definicion de variables desde la base de datos:
strImage = rsProdInfo("productImg01")-->en esta es donde ahora esta fija la imagen y aqui es donde se tendria q cambiar la imagen
strImage02 = rsProdInfo("productImg02big")-->grandes(160*241)
strImage03 = rsProdInfo("productImg03big")-->grandes(160*241)
strcolor02 = rsProdInfo("ncolor02") -->pequeñas(25*25)
strcolor03 = rsProdInfo("ncolor03") -->pequeñas(25*25)
------------------------------------------
Esto es como lo tengo actualmente con las imagenes;

<table width="148" height="81" border="0" align="center">
<tr>
<th width="145" height="77" align="center" valign="middle"><p align="center" class="Estilo4"><img src="<%= strImage %>" border="0" align="top"></th>
</tr>
</table>
<div align="center"><br>
<a href="#" class="Estilo20" onClick="MM_openBrWindow('<%= strImage02 %>','image','width=400,height=601')"><img src="<%= strcolor02 %>" alt="Pinche para ver la imagen en grande" border="0" align="top" marginwidth="0" leftmargin="0"></a>

<a href="#" onClick="MM_openBrWindow('<%= strImage03 %>','image','width=400,height=601')"><img src="<%= strcolor03 %>" alt="Pinche para ver la imagen en grande" border="0" align="top" marginwidth="0" leftmargin="0"></a></div>
</div>
<div align="left"><br>
</div>
</table>
Gracias por la ayuda

[CésarBalaguer]

Debo entender que con las imàgenes "pequeñas" tienes dos eventos, uno al pulsar un click y otro al pasar el mouse sobre ella, en el primer caso abres una nueva pantalla con la imàgen redimensionada y en el segundo caso traslapas la imagen pequeña por la grande. ¿es correcto?

Desde el momento que recuperas las imàgenes de la base de datos, todo queda en control del cliente (browser) por lo tanto puedes manipularla utilizando javascript.

Tu còdigo:
<a href="#" class="Estilo20" onClick="MM_openBrWindow('<%= strImage02 %>','image','width=400,height=601')"><img src="<%= strcolor02 %>" alt="Pinche para ver la imagen en grande" border="0" align="top" marginwidth="0" leftmargin="0"></a>
te sirve para lo que serìa la carga inicial de las imàgenes en la pàgina...

Sin embargo, una vez la pàgina haya sido cargada tu debes seleccionar la imagen que deseas mostrar en "grande"; para eso al momento de pasar el mouse debes usar el evento onMouseOver y llamar en este a una funciòn JavaScript donde modifiques el src de la imàgen "grande" con el src de la imàgen que hizo la llamada a la funciòn. Para ello no requieres utilizar el HREF y tampoco requieres hacer submit porque todo lo puedes trabajar desde el cliente dado a que no hay ninguna variaciòn de las imàgenes cargadas.

Una consulta... que hace el MM_openBrWindow y que paràmetros recibe?; envìamelo por favor

De primera instancia te recomendarìa utilizar la siguiente forma obviando el href y sin saber aun que hace tu funciòn MM_openBrWindow
(Toma en cuenta que el this hace referencia al objeto en donde estas realizando el evento)


<img src="<%= strcolor02 %>" alt="Pinche para ver la imagen en grande" border="0" align="top" marginwidth="0" leftmargin="0" onClick="MM_openBrWindow(this,'image','width=400,h eight=601') ;" onMouseOver="javascript:cambiaimagen(this);">


<script language="javascript">
function cambiaimagen(imagen){
var fotogrande = document.getElementById("foto160x241");
fotogrande.src=imagen.src;

}
</script>

[Essftg]

<!-- imagenes en grande incio-->
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>

Esto es el q hace q cuando pinches sobre la foto pequeña se habra un popup con la foto en grande.

[CésarBalaguer]

dado a que tu funciòn es genèrica lo que debes hacer es cambiar la llamada a la funciòn que te enviè en el mensaje anterior por este otro:

<img src="<%= strcolor02 %>" alt="Pinche para ver la imagen en grande" border="0" align="top" marginwidth="0" leftmargin="0" onClick="javascript:MM_openBrWindow(this.src,'image','width=400,h eight=601'); " onMouseOver="javascript:cambiaimagen(this);">

con la propiedad this.src, lo que le envìas a tu funciòn es la ruta y nombre de tu imagen

Saludos.

[Essftg]

lo siento lo estoy probando pero no me funciona, me podrias poner el codigo completo a ver como quedaria por favor, no me cambia la imagen. No me hace nada de nada.

[CésarBalaguer]

ok, con mucho gusto, voy a preparar un còdigo con lo que estas pidiendo y te lo envìo en el transcurso del dìa.

[sjam7]

yo pienso que lo primero seria hacer la pregunta donde se debe de hacer que es en el foro de javascript, no por que el archivo tenga extencion ASP se tiene que preguntar algo de JS aqui, quizas ese sea el foro mas adecuado para esto

[Essftg]

es q esto tira todo atraves de bases de datos y no se muy como hacerlo si me podeis asyudar os lo agradeceria.

[CésarBalaguer]

Te envìo este còdigo de muestra para que lo adaptes al que tu tienes.
En si la parte de base de datos la debes utilizar ùnicamente para la carga inicial de las imàgenes, una vez las hayas cargado en tu browser todo lo que sigue se hace desde el cliente.
En el ejemplo que te envìo estoy asignando a variables ASP las rutas de las imàgenes, en tu caso esa parte debes cambiarla por la carga de las imàgenes que estàn en la base de datos.

<%
const urlImagenGrande="C:\foto1.jpg"
const urlImagenChica="C:\foto2.jpg"
%>

<HTML>
<BODY>
<Form name=frmPricipal>
<div>
<P>Imagen Grande</p>
<img name=imagenGrande id=miImagenGrande src='<%=urlImagenGrande%>' width=400 border=2>
</div>
<div>
<p>Imagen Chica </p>
<img name=imagenChica id=miImagenChica src='<%=UrlImagenChica%>' onclick="javascript:abreVentana(this.src);" onmouseover="javascript:cambiaImagen(this)" width=100 border=1>
</div>
</Form>

<script language="javascript">
function cambiaImagen(imagenChica){
var aux=document.frmPricipal.imagenGrande.src;
document.frmPricipal.imagenGrande.src=imagenChica. src;
imagenChica.src=aux;
}

function abreVentana(pUrl){
window.open(pUrl);
}
</script>
</BODY>
</HTML>

[Essftg]

Muchisimas gracias voy a ir probando y depurando codigo, SJAM7 a ver machote y esto como lo harias con imagenes q lo cogiesen desde la base de datos.

[sjam7]

Iniciado por Essftg

Muchisimas gracias voy a ir probando y depurando codigo, SJAM7 a ver machote y esto como lo harias con imagenes q lo cogiesen desde la base de datos.

exactamente igual, el script que te pasa y hace lo que quieres es javascript

asp no lo usas para solucionar tu duda sino javascript , mi comentario no es para molestar,sino para que sepan discernir donde buscar asi que ni te alteres

[CésarBalaguer]

Para leer las imàgenes de una base de datos lo ùnico que tienes que hacer es cambiar la parte de ASP del còdigo donde asigno rutas fijas a unas variables, en lugar de eso pones tu query de recuperaciòn, recorres tu resultado e interactuas tu asp con html para ir creando <img> con las rutas que vas recuperando de tu base de datos, mas o menos la lògica serìa algo asì:

<% sql="select ruta_imagen from tabla where condicion"
set mAdo = conexion.execute(sql)
' Por cada registro que te devuelva tu recordset vas generando una etiqueta <img>
while not mAdo.eof %>
<img src='<%=mAdo(0)%>' onclick=..... onMouseOver=....>
<% mAdo.movenext
wend %>


y para terminar lo que indica sjam7 es cierto, tu consulta se resuelve desde el lado cliente, para ello se utiliza còdigo javascript, el asp en este caso lo utilizas ùnicamente para la carga inicial de tu pàgina donde recuperas las imàgenes de la base de datos y las envìas a tu browser, una vez tu pàgina haya sido cargada con dichas imàgenes todo queda en el cliente, y si bien es cierto, la pregunta esta màs orientada a un foro de javascript no significa que aquellas personas que estamos en el foro de asp no podamos o debamos responder preguntas de javascript sabiendo las respuestas.

[Essftg]

Muchas gracias y siento haberme equivocado.
Luego cuando termine de montar toda la programacion de asp me pondre hacer pruebas par ver si lo saco todo esto.

Muchas gracias