Simple Mouseover and MouseOut Effect

I’m having a little brain wreck here. I haven’t done image rollovers in a while. But I’m trying to change the background of an image when the mouse rolls over a <div> and then change it back to the original image when the mouse rolls out.

The code I have is doing something but it isn’t the right solution.

[CODE]

function highlightArrows(){

var arrow_div_left = document.getElementsByClassName(‘arrow-left’)[0];
var arrow_div_right = document.getElementsByClassName(‘arrow-right’)[0];

arrow_div_left.style.backgroundImage=”url(‘images/arrow-out-left-skyblue.png’)”;
arrow_div_right.style.backgroundImage=”url(‘images/arrow-out-right-skyblue.png’)”;

}

function replaceImages(){

var arrow_div_left = document.getElementsByClassName(‘arrow-left’)[0];
var arrow_div_right = document.getElementsByClassName(‘arrow-right’)[0];

arrow_div_left.style.backgroundImage=”url(‘images/arrow-out-left.png’)”;
arrow_div_right.style.backgroundImage=”url(‘images/arrow-out-right.png’)”;

}

[/CODE]

[code=html]

<div class=”gallery-thumbs-wrapper” onmouseover=”highlightArrows()” onmouseout=”replaceImages()”>
</div>

[/code]

I’m missing something in the JS code and can’t figure out what it is. The replaceImages() is suppose to return the image to its original pic. Any suggestions?

Also in #JavaScript _↴