BleepingComputer.com: Show image on mouse over

I am using php language. I have an image that when clicked it redirects to another page but, I want when you go on it with the cursor, it wont flip to another image (rollover), it will show another image.

More detail.

I have an image and when on mouse over, a small image with transparent background shows on the other one. I want the main image to be visible too.

I dont want to use the dreamweaver roll over function, cause it adds a lot of useless code. Im making this website "light weight" as possible. Just for satisfaction


Thanks in advanced

You can't use PHP to do it because PHP runs on the server. The action you are describing takes place on the Client, and therefore needs to be done in a client side language, ie Javascript, Flash, Silverlight. I'm assuming that the code you describe as 'useless code' is actually the javascript handler, which is actually pretty important.

Javascript has a function called "addEventListener" which will add a listener to any element that you specify, for example:

element.addEventListener('mouseover',doSomething );

Where "doSomething" is a function, which for instance can be used to apply a style to an element. The CSS can do any number of things, including displaying an image of some sort.

Thanks for the reply.

The useless code which I was talking about is the code that some functions of dreamweaver which puts a long line, where you could get the result you want with a small line.(you know what im saying ?)

Im using CSS too, to position the images and if I put some javascript to get the result which I want, that wouldn't be a problem.