Adding mouseover properties to an existing image

[leroi green]

hey guys

i have a image around 995x700. and i'm about to change up a couple things on a site i'm working on and want to add a mouseover event (or something like that) to it.

i certain areas, i would like the user to mouse over and see a new image rise up in front of the existing image, and then go away when they "mouse off" (i guess that's the term).

i know there is a possible way through jscript or ajax.

please help AND teach me, i really wanna LEARN how to make this work.

any suggestions?

[Frankey]

Hi Green,

There are a few ways to get what you need.

1. You can use CSS like this

Your css ( a image of 50 x 50 px )

.image { display:block; width:50px; height:50px; background:url(image1.jpg) no-repeat;}

.image:hover { background:url(image2.jpg) no-repeat;}

your html

<div class="image"></div>

there is a better way to have no flicker when they mouse over the first time ( on the first mousover the second image get loaded.)

This is the way to use one image and tell CSS to show the top or bottom

a image that contain your2 images ( 100 x 50 px)

.image { display:block; width:50px; height:50px; background:url(image1.jpg) top no-repeat;}

.image:hover { background:url(image1.jpg) bottom no-repeat;}

Because the div told to be always 50px by 50px it will only show that area of a image. In the normal state we tell to show the 50px of the top and on hover the 50px of the bottom.

You can also use js indeed, but if above fits your needs that is the best way to do it.

I you want to use js you should google first, cause that are a lot of tutorials for what you are asking.

So what do you want?

javascript change image on mouse over

Google that and you get tons op examples.

Good luck

[leroi green]

okay, i'm gonna try the second style...

will it work if i wanted more that 1 mouseover spot?

[Frankey]

No it won't, you really need javascript for that. I saw a script once which uses the jquery libary but couldn't find it so easy. Just search google for 'jquery slideshow top 10' or 'jquery slider top 10'.

[capn]

I've been searching the web for this exact thing and found this post extremely useful. I don't see how it is better to duplicate the effort of someone asking this question again and hope that Frank is still paying attention? Let the thread live!