[TUTORIAL] Crear un rollover

Que es un Rollover?
un rollover, es cuando pasas el cursor por encima de una imagen, que esta, canvie automaticamnte

Como lo hazemos?
tenemos dos posivilidades.
a) con flash, pero no os lo voy a explicar, porque no es mi campo
b) en html porejemplo, con algo asi como un script, os lo explico

vamos a usar por defecto, una imagen, de mi web
representa ser un boton, que al pasar el raton por encima, se ilumina, como hazerlo?
mirar:
este es mi script

Citar

onmouseover="document.event.src='Images/event_on.gif';"
onmouseout="document.event.src='Images/event.gif';">
"Eventos

os explico primero, luego pasamos a editarlo:

Citar

aqui es para vincular la imagen, sino le ponemos un link, no funcionara, si quereis poner un link que no vaya a ninguna parte, colocar #, asi canviara la imagen y no ocurrira nada al clicarla,
canviamos el:

Citar

por la direccion, ejemplo si quiseramos que linkease a divinero substituiriamos # por:

Citar

http://www.divinero.net

quedaria asi:

Citar

http://www.divinero.net onclick="returnfalse;"

ahora vemos este trozo:

Citar

onmouseover="document.event.src='Images/event_on.gif';"

os explico, este trozo es para especificar que imagen se mostrara al pasar el raton por encima, si porejemplo fuera un pescado iluminadose pondria lo siguiente:

Citar

onmouseover="document.pescado.src='Images/pescado_iluminado.gif';"

hemos editado:

Citar

Images/event_on.gif

por

Citar

Images/pescado_iluminado.gif

aqui estamos dandole la direccion de la imagen a mostrar el cursor por encima
y tambien hemos editado:

Citar

document.event.src

por

Citar

document.pescado.src

este utlima parte es muy importante, si utilizais dos rollover, ejemplo uno de un pesaco y otro de un cocodrilo, no podeis tener los dos con document.pescado.src, pues no se realizara el efecto rollover, deveriais poner para la del pesaco: document.pescado.src
y para la del cocodrilo: document.cocodrilo.src

pasemos a lo siguiente, ahora nos encontramos con:

Citar

onmouseout="document.event.src='Images/event.gif';">

este trozo es para decirle que imagen es la que se va a mostrar al sacar el raton de la imagen, pondremos la original, NO LA ILUMINADA
y en

Citar

document.event.src

colocamos el que hemos puesto arriva, si hemos puesto

Citar

document.pescado.src

pues volvemos a poner en este

Citar

document.pescado.src

tambien.

ahora nos topamos con:

Citar

esto es la imagen, en que dimensiones hira ecz, en donede pone "event" colocamos lo que hayamos usado antes, no lo que he insistido antes, en este caso lo de pescado, y luego la ruta de la imagen, que se mostrara, al no tocar nada, osea la orijinal sin iluminar, en donde pone "Eventos para este mes" es para, al pasar el raton por encima, y dejarlo quieto un rato, aparece ese mensaje, colocar uno a vuestra eleccion
y terminamos con

Citar

para cerrar el codigo de hipervinculo