RollOver con cambio de imagenes

[Megcapkill]

Hola! Que tal? Bueno escribo esto porque mi idea era la de hacer un rollOver sencillo (muuy sencillo) a base de cambio de imagenes para imitar un boton flash que tenia. Ahora la pregunta es la siguiente.. yo encontre esto en la web

<script type="javascript"
RollOverImg = new Image()
RollOverImg.src = "img1.png"
</script>

Luego al boton darle en el href

onMouseOver="RollOverImg.src = "img2.png"
onMouseOut="RollOverImg.src = "img1.png"

Bien.. eso seria un pseudocodigo de la idea de lo que quiero hacer (y si fuese asi anda xD)

Ahora.. yo tengo una tabla en MySQL que tiene almacenadas las rutas de las imagenes estas (img1.png e img2.png en este caso)

Me gustaria saber si se puede hacer algo como

onMouseOver="RollOverImg.src = "<?php echo $ruta2; ?>"
onMouseOut="RollOverImg.src = "<?php echo $ruta1; ?>"

Lo intente.. pero no se como hacer para definir la primera ruta que esta en el head dentro de las tags <script></script>

Espero se haya entendido y desde ya muchisimas gracias a todos!

[IsaBelM]

creo que te conviene mas hacer un rollover usando sprites y olvidar usar bd y javascript para eso

[Megcapkill]

Hola Isabelm, gracias por responder! Esa solucion seria apropiada si yo supiese las rutas de las imagenes, o el lugar de donde cortalas.. pero no tengo esos datos hasta cargar la web :S

habra alguna chance de adaptarlo? saludos!


Otra cosa que me olvidaba... no todas las imagenes tienen el mismo tamaño!! Eso me generaría un pequeño inconveniente con los sprites.. deberia guardar en mis tablas el lugar del sprite donde cortar. Y seria molesto actualizarlas

[IsaBelM]

Iniciado por Megcapkill

Hola Isabelm, gracias por responder! Esa solucion seria apropiada si yo supiese las rutas de las imagenes, o el lugar de donde cortalas.. pero no tengo esos datos hasta cargar la web :S

habra alguna chance de adaptarlo? saludos!


Otra cosa que me olvidaba... no todas las imagenes tienen el mismo tamaño!! Eso me generaría un pequeño inconveniente con los sprites.. deberia guardar en mis tablas el lugar del sprite donde cortar. Y seria molesto actualizarlas

hasta este momento sólo habías hablado de dos imagenes y que conocías sus rutas.
esto debe funcionar

onMouseOver="RollOverImg.src = "<?php echo $ruta2; ?>"
onMouseOut="RollOverImg.src = "<?php echo $ruta1; ?>"

Lo intente.. pero no se como hacer para definir la primera ruta que esta en el head dentro de las tags <script></script>

puedes hacerlo igual que en el html o puedes usar php en un archivo js

[Megcapkill]

Hola Isa.. mmm creo que nos estabamos entendiendo mal jeje. Te cuento bien el entorno de todo.

Tengo secciones cargadas en una base de datos. Tengo un codigo php que me levanta los datos de la BD y con un while genero toda la barra, sin importar la cantidad de botones que haya..

Basicamente, yo querría poder hacer ese boton de cambio de imagenes en el cual yo tengo en cada fila de la BD seccion dos campos, uno con la ruta de la apariencia normal y otro con el rollover..

Puse la consulta aca porque yo habia hecho lo que escribi arriba, pero cuando se al momento de codificar la ruta de la imagen, en este caso, la ruta esta en la BD..

No se si me explique bien esta vez :S

Saludos y gracias!! ^.^

[caricatos]

Hola:

Cuando uses eventos, olvídate de poner mayúsculas... creo que algunos editores lo hacen pero no es lo correcto... y si la imágen de sustitución está en la variable RollOverImg, donde quieras hacer el efecto pones:

<img src="imagen.gif" onmouseover="this.src = RollOverImg.src"...

Saludos

[Megcapkill]

Iniciado por caricatos

Hola:

Cuando uses eventos, olvídate de poner mayúsculas... creo que algunos editores lo hacen pero no es lo correcto... y si la imágen de sustitución está en la variable RollOverImg, donde quieras hacer el efecto pones:

<img src="imagen.gif" onmouseover="this.src = RollOverImg.src"...

Saludos

Hola.. gracias por responer y perdón por la demora. Intenté esto que me has dicho, pero no ha resultado :/

Mira dejo el pedacito de codigo

Código HTML:

<a href="javascript:avanzar(<?php echo $cat["CAT_ID"]; ?>,1,1)"><img src="<?php echo $in; ?>" onmouseover="this.src = <?php echo $out; ?>" onmouseout="this.src = <?php echo $in; ?>" name="rollOver" border="0" align="right"/></a> 

Las variables $in y $out de php son las que obtengo de mi base de datos con las rutas relativas de mis dos imagenes, la del mouseover y la del mouse out.

Muchas gracias!

EDITO: La pagina me pone "cargada con errores" cuando pongo la linea html que cite arriba y pongo el mouse sobre alguna de las imagenes.. o sea, da error cuando intenta hacer el rollover parece ser :(

[Megcapkill]

Bueno aquí encontré la solución. Un poco de javascript que rescaté del dreamweaver y algo de lo que ya tenía hecho.. y anda. Les dejo el código por si a alguien más le es util:

Código Javascript:

<script type="text/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_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
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];}
}
//-->
</script>
 

Código HTML:

<a href="link.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nombre_imagen','','ruta_rollover.png',1)"><img src="ruta_rollout.png" name="nombre_imagen" border="0" id="nombre_imagen" align="right"/></a>
 

Saludos a todos!