Cambiar una imagen por otra al poner el cursor encima

chcma · #1 (**permalink**) 19/05/2004, 14:23

Buenas Noches,

Verán, pues mi duda es la siguiente, resulta que tengo una imagen que actua como un botón, ¿Como podría hacer que al poner el cursor sobre la imagen se cambiase esta imagen por otra y que al quitar el cursor se pusiera la otra de nueva?

En fin, espero que puedan ayudarme, y desde ya, Muchas gracias!!!

caricatos · #2 (**permalink**) 19/05/2004, 16:18

Hola chcma:

Tienes que usar los eventos onmouseover para poner la segunda imagen y onmouseout para restaurar la primera...

<img src="primera.gif" onmouseover="this.src = 'segunda.gif'" onmouseout="this.src = 'primera.gif'" onclick=... />

Saludos

KarlanKas · #3 (**permalink**) 19/05/2004, 16:19

Ingredientes:

2 imagenes. una con un nombre y la otra con el mismo nombre terminado en 1. Ejemplo: imagen.jpg e imagen1.jpg

Modo de empleo:

<img
src="imagen.jpg"
onmouseover="this.src=this.src.split['.'].join['1.']"
onmouseout="this.src=this.src.split['1.'].join['.']">

Puedes usarlo para todas las imagenes que quieras. Siempre que respetes lo dicho:

pepe.jpg ------->Normal
pepe1.jpg ------>Con el ratón encima

KarlanKas · #4 (**permalink**) 19/05/2004, 16:20

Hola Caricatos!! Menudo choque!

caricatos · #5 (**permalink**) 20/05/2004, 07:31

... :

Para la aseguradora me chocaste tú a mí:

Me adelanté porque le quisiste dar tu "toque"... y yo metí la primera...

Lo importante es que le sirva a chcma... esperemos que se pronuncie...

chcma: Hay más formas de conseguir lo que pides, pero dinos si esto te sirve.

Saludos

KarlanKas · #6 (**permalink**) 20/05/2004, 09:24

Esta es otra:

<img primera="imagen.jpg" segunda="pepito.jpg"
onmouseover="this.src=this.segunda"
onmouseout="this.src=this.primera"
src="imagen.jpg">

Está hecha a raiz de un descubrimiento tuyo, caricatos!

Carlitos · #7 (**permalink**) 20/05/2004, 11:02

Hola.

Aquí promocionando las faq's.

Solución nº1

Solución nº2

caricatos · #8 (**permalink**) 20/05/2004, 16:58

Hola a todos:

KarlanKas: supongo que mi aporte fué lo de inventarse atributos... (aunque no sea invento mio, reconozco que alguna vez lo he promovido...

)

También propuse otra forma de rollover (en algún post perdido estará) que uso en el menú de mi página de caricaturas que consiste en tener 2 capas superpuestas, haciendo invisible la superior con el paso del ratón... iba a hacer un copy & paste pero es un poco complicadillo.

Carlitos: tanto tiempo...

... un abrazote desde la Costa del Sol

Saludos

JavierB · #9 (**permalink**) 21/05/2004, 01:47

Hola a todos.

Habeis montado un festorro y yo sin enterarme. Pues ahora voy a poner código Css en el Foro de JavaScript

Código PHP:

  <html> 
<head> 
<style> 
#foto a { display:block; 
    width:88px; 
    height:31px; 
    background:url('imagen1.gif'); } 
#foto a:hover { background:url('imagen2.gif') no-repeat} 
</style> 
</head> 
 
<body bgcolor="#FFFFFF" text="#000000"> 
<p id="foto"><a href="#"></a></p> 
<a href="#">Enlace</a> 
</body> 
</html>

Saludos,

Carlitos · #10 (**permalink**) 21/05/2004, 10:26

Ummm, caricatos... costa del sol... torremolinos...

En julio estaré por allí.

JavierB, bienvenido.

caricatos · #11 (**permalink**) 21/05/2004, 14:31

Hola otra vez:

Simplifiqué un poco lo de mi página, y el rollover que comentaba antes se queda así:

Código PHP:

  <html> 
<head> 
<title> 
    rollover nuevo 
</title> 
</head> 
<body > 
    <a href="#" > 
        <div style="position: relative;" > 
            <img  
                style="position: absolute; top: 0; left: 0;" 
                src="../imagenes/fotos/mini/Diapositiva82.jpg" 
                onmouseout="document.images.rollover.style.visibility = 'visible'" 
            /> 
            <img 
                name="rollover" 
                style="position: absolute; top: 0; left: 0;" 
                src="../imagenes/fotos/mini/Diapositiva52.jpg" 
                onmouseover="this.style.visibility = 'hidden'" 
            /> 
        </div> 
    </a> 
</body> 
</html>

Puede verse el resutado fácilmente con mi probador de scripts: http://www.pepemolina.com/probador/index.html ... hay que pegar el código y ver los resultados.

Carlitos: Voy a reservar unas cajas de cerveza (o mejor unos barriles...

)... No dejes de avisarme... puedes ganarte una caricatura...

¡Interesante gif...!

Saludos

Carlitos · #12 (**permalink**) 21/05/2004, 15:11

Oye caricatos, que interesante el probador de script's.

Ya te avisaré. es para la segunda semana de julio.

caricatos · #13 (**permalink**) 21/05/2004, 16:37

Gracias por el comentario...
Yo lo uso mucho, y en localhost tengo una versión un poco ampliada enlazada a una pequeña tabla mySql con los scrips que me interesan... y el código no puede ser más sencillo.

chcma: Como no te pronuncies, creo que seguiremos con la tertulia

Saludos

Carlitos · #14 (**permalink**) 22/05/2004, 03:26

estará viendo la boda de su paisana.

tunait · #15 (**permalink**) 22/05/2004, 03:48

yasta bien, a mi tampoco me habeis avisado del botellón este espontáneo que estabas haciendo.....

yá decía yo desde fuera ... "sí que genera respuestas este post con lo sencillito que es intercambiar una imagen...."

tunait · #16 (**permalink**) 22/05/2004, 03:49

posdata: me gusta mucho la forma css que propone javierB

Carlitos · #17 (**permalink**) 22/05/2004, 08:00

Bienvenida,

Se te echaba de menos.

La verdad, es que no había nada planeado pero, una cosa siguió a la otra... nos fuimos animando... y al final, fiestón.

Para otra ocasión te enviaremos una invitación. (pareado,

)

KarlanKas · #18 (**permalink**) 22/05/2004, 08:35

Tunait!! No traes los fuets?!

trialorololooooo...!

JavierB · #19 (**permalink**) 22/05/2004, 08:46

Rehooola.

Me alegro de que te haya gustado "mi" código, tunait (lo pongo entre comillas, porque no lo he inventado yo)

Por cierto... ¿Que pensais que ha pasado con chcma?

a - Le ha funcionado algún método y se ha emborrachado para celebrarlo

b - No le ha funcionado ningún método y se ha emborrachado para olvidarlo

c - Se ha leido el post entero y ha tenido que acudir a la consulta de un psiquiatra

d - Todas las anteriores son correctas

Saludos,

Carlitos · #20 (**permalink**) 22/05/2004, 09:03

e - Está ocupado haciendo críticas constructivas.

chcma · #21 (**permalink**) 22/05/2004, 15:08

Buenas Noches, espero no haberte parecido ofensivo en el post anterior Carlitos, pero ye lo ke hay.

Sobre lo de las imagenes ya lo he resuelto, gracies a toos por la vuestra colaboración.

Yo lo he hecho de esta forma, haber si les parece correcta, fiable y competente:

<img src="img/imagen1.jpg" onMouseOver="this.src='img/imagen2.jpg'" onMouseOut="'img/imagen1.jpg'">

Saludos y nuevamente gracias.

caricatos · #22 (**permalink**) 22/05/2004, 17:19

Hola a todos:

Parece que chcma decidió usar mi respuesta así que "ante notario" voy a poner otra marca en mi "winchester"...

Tunait: a ver si nos sorprendes y apareces en el guateque (¿se escribe así...

?)

También están invitados los demás (¡espero que traigan "pelas"!)

Saludos

KarlanKas · #23 (**permalink**) 23/05/2004, 05:35

Me vais a permitir un par de comentarios:

1.- Sería bueno agradecer cuando a uno le ayudan.
2.- Sería mejor el ser paciente con los que no saben. Más que nada porque siempre ha habido alguien que ha sido paciente con nosotros antes.

El que tenga entendederas que entienda. Me sé de más de uno que ha dejado de recibir ayuda por gente de estos foros por no tener esto en cuenta...

Un saludo a todos!!

Carlitos · #24 (**permalink**) 24/05/2004, 08:35

Sería mejor que utilizase la precarga de imágenes... vamos digo yo.