jquery - Javascript image change -

javascript being used make neat log-out button. works except cannot figure out how attach line 'span' edits image because code uses self variable. how can image used in script attached span in link image changes regardless if hovering on link or image. have tried use few solutions nothing either worked way wanted or not @ all. jquery fine solution well. ignorant far javascript/jquery goes of coding far php/css.

<a href="#logout"> <span>logout</span> <img src="images/logout.png"    onmouseover="this.src='images/logout_hover.png'"    onmouseout="this.src='images/logout.png'" /> </a> 

since events propagate, 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 2pha mentioned, using simple css 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 2 images , use new image sprite, 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; }