Have a look in this jsFiddle. I have simplified a little your mouseover
binding and added some comments to detail the differents steps
Also note that :
- ids must be unique in the DOM, you have duplicated ids (
product-img-box
) - you don't need to do this test
if (document.getElementById)
- you don't need to return something in your
showPic
function - the
fadeout()
function supports a callback function, that is to say when fade out is complete, the callback function will be executed so you don't need to usesetTimeout()
to wait before callingfadeIn()