Sustituir imagen por otra con mouseover (desde Base de Datos)

[Seisler]

Hola. Tengo un problema y me estoy volviendo loco. No se ni si estoy escribiendo en el sitio correcto.

Explico:

- Tengo una galería de fotos las cuales están en el servidor web y las coloco mediante PHP-SQL consultando a la base de datos.

- El problema viene cuando quiero hacer un mouseover y que esta imagen sea sustituida por otra que también está en el servidor. La ruta de esta imagen esta en una tabla de la BD llamada clientes; la cual tiene (id_cliente, nombre_cliente, ruta_logo) donde ruta logo es la ruta de la imgen en el servidor.

Entonces lo que yo quiero hacer es que cuando pase por encima de la primera imagen, la cual tendrá el id_cliente, vaya a buscar la imagen del logo de la cual pertenezca.

Por ejemplo la imagen 1 tendrá por cliente Apple, la 2 HTC... pues al pasar por encima de cada una que me salga el logo del cliente.

No se si lo puedo hacer solo con JAVASCRIPT o también tendré que meter AJAX. Pasando alguna variable por onmouseover o algo así!

Pido disculpas por mi falta de conocimientos en JAVASCRIPT y en AJAX.

Si alguien me pudiera echar un cable se lo agradecería muchísimo!

Un saludo

[Panino5001]

Porqué no traés las rutas de ambas imágenes de manera simultánea? Supongo que estarás paginando, de manera que el costo de hacerlo no será elevado...

[Seisler]

Iniciado por Panino5001

Porqué no traés las rutas de ambas imágenes de manera simultánea? Supongo que estarás paginando, de manera que el costo de hacerlo no será elevado...

En eso he caído después de hacer la pregunta. He pensado que una vez haga la consulta, también me pase la ruta a través de SQL.

Os digo algo si lo consigo!

Gracias!

[Seisler]

Buenas.

Sigo sin conseguir que me cambie una imagen por otra. Y ya me estoy volviendo loco. A ver si alguien puede decirme porque esto no funciona.

Tengo estas tres funciones en Javascript:

Código Javascript:

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
 

Para que efectué efectos sobre unas imágenes que cojo del servidor mediante php.

Con este codigo:

Código PHP:

include ("functions.php");
        connexio();
        $consulta="SELECT * FROM proyectos ORDER BY id_proyecto DESC";
        $resultat=mysql_query($consulta);
        
        while ($fila=mysql_fetch_assoc($resultat)) {
                    $logo=mostrarLogo($fila["cliente"]);
                    $imagen_mini=$fila[imagen_mini];
                                        
                    echo "<a href=\"videos.php?id_proyecto=".$fila["id_proyecto"]." \"><img class=\"mini\" src=\"images/".$fila["imagen_mini"]." \" name=\"".$fila["imagen_mini"]."\" alt=\" ".$fila["nombre_proyecto"]."\" title=\" ".$fila["nombre_proyecto"]."\" onMouseOver=\"MM_swapImage('".$imagen_mini."','','images/logos/'".$logo."',1)\" onMouseOut=\"MM_swapImgRestore()\" /></a>";
                    
                                                                                                                                                                                                                                                                                                                           
                }
 

Genero las imágenes e intento cambiar unas por otras en el mouseover, pero no hay manera. Entonces no se si es porque no lo estoy haciendo bien. O por que no se puede. O porqué me falta algo....

Mis conocimientos en JavaScript son pésimos así que no se ni por donde seguir.

Agradecería una respuesta.

Gracias

[Seisler]

Hola. A ver si aquí me podéis ayudar. Tengo un problema con rollover.

Hacer un rollover senzillito con dos imágenes es cosa fácil.

Mi problema llega cuando estás imagenes las pongo mediante url's que tengo guardadas en la bd.

El tema es que creo una galería con php con un while. Hago la consulta para que me coja todas las fotos y después hago un while para que me las vaya poniendo. Pues bien. Aquí ya empiezo a tener problemas. Y aún no he tenido que meter PHP. Ya no me cambia las fotos. ¿Alguien tiene una idea de porque?

aquí el código:

Código Javascript:

<script type="text/javascript">
            
                   
                    function cambiar(){
                        document.images["imagen"].src = "images/einstein-2.jpg";
                    }
           
                    function restaurar(){
                        document.images["imagen"].src = "images/BMX+Bandits+bmx.jpg";
                    }
        
                </script>
 

Código PHP:

$consulta="SELECT * FROM proyectos ORDER BY id_proyecto DESC";
        $resultat=mysql_query($consulta);
        
        while ($fila=mysql_fetch_assoc($resultat)) {
                    $logo=mostrarLogo($fila["cliente"]);
                    $imagen_mini=$fila[imagen_mini];
                                        
                    echo "<img class=\"mini\" src=\"images/".$imagen_mini." \"  name=\" imagen \" onMouseOver=\"cambiar();\" onMouseOut=\"restaurar();\" />";
 

[Panino5001]

Por favor no crees nuevos mensajes si se trata del mismo tema.
A ver si esto te da una idea:

Código PHP:

  <?php
$qry=mysql_query("select img1,img2 from loquesea order by id");
while($row=mysql_fetch_assoc($qry)){
?>
<!--precargamos la imagen de sistitución para evitar efectos raros durante el rollover:-->
<div style="width:0; height:0;overflow:hidden"><img src="<?php echo $row['img2']?>" /></div>
<!--mostramos la imagen con su efecto de rollover:-->
<img src="<?php echo $row['img1']?>" onmouseover="this.src='<?php echo $row['img2']?>';" onmouseout="this.src='<?php echo $row['img1']?>';" />
<?php } ?>   

[Seisler]

Iniciado por Panino5001

Por favor no crees nuevos mensajes si se trata del mismo tema.
A ver si esto te da una idea:

Código PHP:

  <?php
$qry=mysql_query("select img1,img2 from loquesea order by id");
while($row=mysql_fetch_assoc($qry)){
?>
<!--precargamos la imagen de sistitución para evitar efectos raros durante el rollover:-->
<div style="width:0; height:0;overflow:hidden"><img src="<?php echo $row['img2']?>" /></div>
<!--mostramos la imagen con su efecto de rollover:-->
<img src="<?php echo $row['img1']?>" onmouseover="this.src='<?php echo $row['img2']?>';" onmouseout="this.src='<?php echo $row['img1']?>';" />
<?php } ?>   

He escrito un nuevo tema porque pensaba que el otro estaba en PHP y no JavaScript.

De todos modos gracias. Le pegaré un vistazo a este código mañana.

Un saludo