cambio de imagen de enlace en el vuelo estacionario

mi pregunta de hoy probablemente tenga una respuesta fácil, sin embargo, he encontrado algunos ejemplos que funcionan pero parece que no puedo transferirlos a mi página web.

Intento usar una imagen para un enlace, y me gustaría que la imagen cambie cuando pasas el cursor sobre ella. El siguiente enlace es lo que bash lograr, pero por cualquier razón cuando reemplazo mi código de mi página, no funciona.

EJEMPLO http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onmouseover

Estoy completamente perdido ahora y solo necesito un poco de ayuda. Aquí está mi código.

MANIFESTACIÓN

function hoverImg(x) { x.style.backgroundImage = "url(image/arrowBtnHover.png)" x.style.transition = "ease 0.5s" } function normalImg(x) { x.style.backgroundImage = "url(https://stackoverflow.com/questions/33485042/changing-link-image-on-hover/image/arrowBtn.png)" } 
 #header { background-color: #473D39; height: 100%; width: 100%; display: table; position: absolute; z-index: 10; } #wrapper { display: table-cell; vertical-align: middle; } #header h1 { text-align: center; margin: 0px; font-size: 80px; padding-top: 5%; font-weight: normal; color: #FFF; letter-spacing: 18px; text-transform: uppercase; } #header h5 { text-align: center; color: #FFF; margin: 15px 15px 50px; font-weight: normal; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; } 
  

Por favor, eche un vistazo a https://jsfiddle.net/avzfdc2j/3/

Se ha hecho usando CSS con imagen de fondo y transición

 div.smile { background-image: url("http://sofes.miximages.com/javascript/stupidity-clipart-1320682287266972230curius_face.svg.hi.png"); background-size: 60px 60px; height: 60px; width: 60px; cursor: pointer; } div.smile:hover { background-image: url("http://sofes.miximages.com/javascript/straight-face-clipart-black-and-white-smiley-face-hi.png"); transition: ease 0.5s; } 

Debería cambiar el atributo src lugar:

 function hoverImg(x) { x.src = "image/arrowBtnHover.png" x.style.transition = "ease 0.5s" } function normalImg(x) { x.src = "image/arrowBtn.png" } 

Pero no creo que la transición funcione con esto.

Como se trata de una imagen , debe cambiar su propiedad src , no es CSS.

 function hoverImg(x) { x.src = "image/arrowBtnHover.png" x.style.transition = "ease 0.5s" } function normalImg(x) { x.src = "image/arrowBtn.png" }