¿Qué código usaríamos para intercambiar dos imágenes?

josemari · #1 (**permalink**) 04/07/2003, 11:23

Hola de nuevo

Tenemos una imagen sobre la que pasamos el ratón y queremos que se sustituyan dos imágenes junto con la que hacemos over.

¿Qué código deberíamos escribir?

¿Dónde puedo encontrar eso?

Gracias.

Carlitos · #2 (**permalink**) 04/07/2003, 11:44

Hola.

Echa un vistazo a las faq's de javascript. Hay alguna que te puede servir para lo que quieres. (incluyen ejemplos)

68.- Rollover

106. Cómo cambiar una imagen al hacer un MouseOver

Un saludo.

josemari · #3 (**permalink**) 04/07/2003, 11:49

Gracias, voy a buscar más porque lo que quiero no es eso. es que se cambie sobre la que hago mouse-over y en ese momento se cambie una tercera a la vez.
Un poco lioso, bue

Carlitos · #4 (**permalink**) 04/07/2003, 11:58

ok, pero con la cambinación de las dos faq's, se puede hacer lo que quieres.

si no sabes cómo, pregunta y te trataremos de ayudar.

josemari · #5 (**permalink**) 04/07/2003, 12:05

Muchas gracias campeón. Me encanta Zaragoza y su gente.

Carlitos · #6 (**permalink**) 04/07/2003, 12:09

jeje, a mi también.

suerte con el código.

JavierB · #7 (**permalink**) 04/07/2003, 12:24

Hola, josemari.

Creo que este código te puede ayudar:

Código PHP:

  <html> 
<head> 
<script> 
function cambiar(obj) { 
    obj.src='imagen2.gif'; 
    document.getElementById('im1').src='imagen3.gif'; 
    document.getElementById('im2').src='imagen1.gif'; 
} 
</script> 
</head> 
 
<body bgcolor="#FFFFFF" text="#000000"> 
<img src="imagen1.gif" width="105" height="46" onmouseover="cambiar(this)">  
<img id="im1" src="imagen2.gif" width="105" height="46"> 
<img id="im2" src="imagen3.gif" width="105" height="46">  
 
</body> 
</html>

No he puesto el evento onMouseOut, pero no creo que te resulte difícil añadirlo. Si tienes alguna duda, como dice Carlitos (¡Hola

), vuelve a preguntar.

Saludos,

josemari · #8 (**permalink**) 05/07/2003, 04:36

Hola javierB, He querido probar antes de contestarte, de ahí la tardanza.

Imaginemos que ya tenemos una parte realizada. Mira aquí por favor pasando el ratón por encima a la derecha en el tablero de cuadros negros y blancos, donde pone consulta elo

Lo único que le falta es que cuando se pasa el ratón por ELO FIDE desaparezca el texto ELO FEDA y viceversa.(Si quieres puedes ver lo que intento en este otro sitio)

Por favor no te desesperes conmigo, comprendería cualquier abandono de tu ayuda, además no es tan importante, es simplemente cabezonería por conseguirlo, pero es que no comprendo nada de código y se me hace todo esto muy difícil. Ya sólo me queda ocultar en el tablero la opción no elegida mientras elijo la contraria, pero ya te digo que tb se puede quedar como está.

Muchísimas gracias por todo tu esfuerzo en ayudarme.
Saludos.

Carlitos · #9 (**permalink**) 05/07/2003, 07:26

No entiendo.

Quieres hacer en la web del primer enlace lo que ya tienes hecho en el ejemplo del segundo enlace.

Cuál es el problema?

(JavierB

)

josemari · #10 (**permalink**) 05/07/2003, 07:50

Quiero completar con código lo necesario para conseguir que funcione igual. Quiero saber exactamente qué codigo tengo que pegar y dónde.

Pero si el que alguien me diga exactamente el codigo que tengo que completar, supone el más mínimo desagrado para quien me lo vaya a decir, prefiero dejar las cosas como están.

Porque es un capricho-curiosidad-cabezonería. Por tanto, como me está llevando más tiempo del que merece, yo ya abandono. Pero si alguién me dice mira, belloto, coge este p.código, cópialo y pégalo en este p.sitio (que es a lo que me tiene acostumbrado mi ángel de la guarda en estos foros) pues entonces yo lo hago, respiro y a otra cosa. Si no, es lo mismo. En serio.

Gracias maño!

Carlitos · #11 (**permalink**) 05/07/2003, 11:10

No me desagrada decírtelo. Si no, no estaría en estos foros.

Déjame que miro los dos códigos y te digo lo que falta. Ok?

josemari · #12 (**permalink**) 05/07/2003, 11:13

tú mismo majo, pero no me hice entender. No me refería a tí. Quise decir que si lleva más molestia de lo que merece la cosa, sencillamente no me interesa... En fin que cuanto más hablo peor.

Carlitos · #13 (**permalink**) 05/07/2003, 12:54

Bueno, josemari.

Ya lo tengo. Pero lo he hecho de otra forma, ya que con las funciones que hace el dreamweaver no me entero.

A ver. Esto es lo que tienes tú:

<a href="consultafide.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ellofide','','images/ELOFIDE-over.gif',1)" target="consultafide"><img name="ellofide" border="0" src="images/ELOFIDE.gif" width="190" height="21" onMouseDown="MM_openBrWindow('consultafide.htm','c onsultafidee','width=262,height=302')" alt="Haciendo "click" aquí"></a><br>
<a href="consultaelofeda.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ellofeda','','images/ELOFEDA-over.gif',1)" target="consultafeda"><img name="ellofeda" border="0" src="images/ELOFEDA.gif" width="190" height="30" onMouseDown="MM_openBrWindow('consultaelofeda.htm' ,'consultafedaa','width=262,height=302')" alt="Haciendo "click" aquí"></a>

y esto es lo que te propongo: (es un poquito más largo)

<a onmouseover="document.getElementById('ellofide').s rc='images/ELOFIDE-over.gif';document.getElementById('ellofeda').src= 'images/ELOFEDA-ELOFIDE_over.gif'"
onmouseout="document.getElementById('ellofide').sr c='images/ELOFIDE.gif';document.getElementById('ellofeda').s rc='images/ELOFEDA.gif'" href="consultafide.htm" target=consultafide><IMG onmousedown="MM_openBrWindow('consultafide.htm','c onsultafidee','width=262,height=302')" height=21 alt='Haciendo "click" aquí' src="images/ELOFIDE.gif" width=190 border=0
name=ellofide></a><BR>
<a onmouseover="document.getElementById('ellofeda').s rc='images/ELOFEDA-over.gif';document.getElementById('ellofide').src= 'images/ELOFIDE-ELOFEDA_over.gif'" onmouseout="document.getElementById('ellofeda').sr c='images/ELOFEDA.gif';document.getElementById('ellofide').s rc='images/ELOFIDE.gif'" href="consultaelofeda.htm" target=consultafeda><IMG onmousedown="MM_openBrWindow('consultaelofeda.htm' ,'consultafedaa','width=262,height=302')"
height=30 alt='Haciendo "click" aquí' src="images/ELOFEDA.gif" width=190 border=0 name=ellofeda></a>

Además tambien tienes que cambiar esto:

<body background="imagenes/encina.gif"bgproperties="fixed" onLoad="MM_preloadImages('images/ELOFIDE-over.gif','images/ELOFEDA-over.gif')">

por esto:

<body background="imagenes/encina.gif"bgproperties="fixed" onLoad="MM_preloadImages('images/ELOFIDE-over.gif','images/ELOFEDA-over.gif','images/ELOFIDE-ELOFEDA_over.gif','images/ELOFEDA-ELOFIDE_over.gif')">

Si siguen las dudas, dímelo.

Y tranquilo. Me gustan los retos. Que a cabezonería no me gana 'naide'.

josemari · #14 (**permalink**) 06/07/2003, 03:17

déjalo carlitos, te agradezco tanto tu ayuda que de verdad no quiero que te molestes más. tunait ya me ha dicho dónde radica el problema y voy aver si con tranquilidad lo consigo. No puedo prescindir de DW porque me ayuda a poner comportamientos y eso ¿sabes?, de verdad muchísimas gracias por inestimable ayuda, paisano, que toda la familia de mi padre es de Zaragoza (y son 8 hermanos, osea que figúrate si tengo primos allí jejej)
Gracias.

Carlitos · #15 (**permalink**) 06/07/2003, 06:07

vale. como quieras. pero con lo que te he puesto arriba, funciona. y sin prescindir de ninguna función de dreamweaver.

por si quieres ver como funciona:

http://www.efrance.fr/litosasp/josemari/aj.htm

josemari · #16 (**permalink**) 06/07/2003, 08:10

Pues sí Carlitos, está conseguido. Entre lo de las plantillas de la tuno, tilu, javierB, tú y casi medio foro más... se consiguió. Muchísimas gracias compañeros.

Carlitos · #17 (**permalink**) 06/07/2003, 12:24

de nada.

JavierB · #18 (**permalink**) 06/07/2003, 12:48

Hola, josemari.

Aunque mi intervención ha sido pequeña, me alegro de que al final lo hayas conseguido.

Saludos,