Javascript disjointed rollover Fade-In Fade-Out

[cetr90]

I’ve created this disjointed rollover effect with javascript. I have two functions: 1:When you hover on a text link it swaps out an image above it, and 2: when you mouse out it returns to the original image.

function change01() {
    document.getElementById("illinoisphoto").src='images/innkeeper.png';
}
function change02() {
    document.getElementById("illinoisphoto").src='images/illinoisplate.png';
}

Then, in the HTML I have this set up:

<li><a href="inkeepermotel.html">INNKEEPER MOTEL</a></li>

I’m trying to figure out how to add a fade-in-out effect to what I have already. I’m brand new to Javascript and I’ve spent hours trying to figure this out, but I need some help. Thanks!

[shaneisme]

Could you set up a live demo on http://codepen.io/pen/ so we can help?

[Author]

Posts