onMouseover-effect via java script?

[einbeiniger]

what i have been thinkink about for quite some time is the following situation:

there should be an image (eg a door) which should change into a second gif (rollover effect) so that it seems like the door would open when the mouse moves over that image. so far no problem. one gif that doesn't move (eg closed door), rollover img = gif with an opening door (repeating only once, so that the door stays open).

now i want the door to close when the mouse leaves the image.
basic img: closed door
--> mouse over: door opens slowly and stays open until
--> mouse away: door closes slowly

is that possible?
a third gif with the function onMouseout?
thanks

[degsy]

The most basic way is

<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image3.gif" alt="image" />

[einbeiniger]

<img src="image1.gif" onmouseover="this.src='image2.gif'" onmouseout="this.src='image3.gif" alt="image" />

i was pondering quite often what this actually is. what i would do (wrong?) is that i would simply write <img scr...............> instead of <img scr........../>.

why?
thanks for your reply, so it IS possible to change the img on the onMouseout! thanks.

[degsy]

XHTML is stricter than HTML and all tags must be closed.
/ is the XHTML character used to close tags.

Where as you can close a <p> with </p>
<img...> has no closing tag, such as </img>

So you use the / to close it.
<img src="" alt="an image />

Same with
<br />
<hr />
<meta .... />
<input ..../>