Alter Image on mouseover and mouseleave

I have two arrays with the list of images name like this

array 1 = ["arrow1.png", "arrow2.png", "arrow3.png", "arrow4.png", "arrow5.png"]

array 2 = ["arrow_over1.png", "arrow_over2.png", "arrow_over3.png", "arrow_over4.png", "arrow_over5.png"]

I want to change the image in div tag with id="alter_img" on mouseover and mouseleave On mouseover it should be "arrow1.png" and on mouseleave it should be arrow_over1.png

Structure is like this

<div id="alter_img">
  <img src="arrow1.png">
  <img src="arrow2.png">
  <img src="arrow3.png">
  <img src="arrow4.png">
  <img src="arrow5.png">
</div>

How could I do that?

Answer

Use data attributes:

HTML

<div id="alter_img">
    <img src="arrow1.png" data-hover_src="arrow_over1.png">
    <img src="arrow2.png" data-hover_src="arrow_over2.png">
    <img src="arrow3.png" data-hover_src="arrow_over3.png">
    <img src="arrow4.png" data-hover_src="arrow_over4.png">
    <img src="arrow5.png" data-hover_src="arrow_over5.png">
</div>

jQuery

$(document).ready(function(){
    $("#alter_img > img").hover(function() {
        $(this).data("orig_src", $(this).attr("src"));
        $(this).attr("src", $(this).data("hover_src"));
    }, function(){
        $(this).attr("src", $(this).data("orig_src"));
    });
});