Since events propagate, this should work:
<a id="login_link" href="#logout" onmouseover="document.getElementById('login_image').src='images/logout_hover.png'" onmouseout="document.getElementById('login_image').src='images/logout.png'">
<span>Logout</span>
<img src="images/logout.png" id="login_image" />
</a>
But as 2pha mentioned, using simple CSS is a lot better:
#login_link span#logo_image {
display: inline-block;
width: 100px;
height: 30px;
background: transparent url(images/logout.png) top left no-repeat;
}
#login_link:hover span#logo_image {
background-image: url(images/logout_hover.png);
}
Or better yet, merge the 2 images and use the new image as a sprite, so they will preload together:
#login_link span#logo_image {
display: inline-block;
width: 100px;
height: 30px;
background: transparent url(images/logout.png) top left no-repeat;
}
#login_link:hover span#logo_image {
background-position: bottom left;
}