Q:

Change multiple images on mouse over , with one function

I have an Exercise to querySelect the image from the HTML and change it on mouseover , I did that correctly like this :
var img = document.querySelector("#image1").addEventListener('mouseover' ,function (){
this.src="images/image1_2.jpg")}

The question is that I have an advanced exercise to change five images in the same way but with " one function "
I did it with five function this way :
const image1 = document.querySelector("#image1")
const image2 = document.querySelector("#image2")
const image3 = document.querySelector("#image3")
const image4 = document.querySelector("#image4")
const image5 = document.querySelector("#image5")
image1.addEventListener('mouseover', function (){
this.src = "images/image1_2.jpg"
})
image2.addEventListener('mouseover' , function (){
this.src= "images/image2_2.jpg"
})
image3.addEventListener('mouseover', function (){
this.src = "images/image3_2.jpg"
})
image4.addEventListener('mouseover', function (){
this.src = "images/image4_2.jpg"
})
image5.addEventListener('mouseover', function (){
this.src = "images/image5_2.jpg"
})

, but I need to do it with one function , any hint on how to do it ?

A:

I hope your img has an initial src. Otherwise you won't be able to mouse over it.  
That being said. You will need to use a className instead of an id for each image  because they are the same category.
<img src="images/image1_1.jpg" class="token" />
<img src="images/image2_1.jpg" class="token" />
<img ...

Change token to whatever you like. 
And then select them by using either document.getElementsByClassName or document.querySelectorAll. They return an HTML collection which is an array-like object.
var images = document.querySelectorAll(".token");

In the snippets below, I use simple divs to illustrate what can be done.

Using forEach loop. you will have to convert the collection to an array in order to use forEach

var imgs = [ ...document.querySelectorAll(".img") ];

imgs.forEach((img, i) => {
  img.addEventListener('mouseover', function () {
    this.textContent = "images/image" + (i + 1) + "_2.jpg";
  });
});
div {
  width: 200px;
  height: 30px;
  float: left;
  margin: 5px 1em;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 0 black;
}
<div class="img" style="background: #234;"></div>
<div class="img" style="background: #7fb;"></div>
<div class="img" style="background: #ace;"></div>
<div class="img" style="background: #d8f;"></div>
<div class="img" style="background: #e6a;"></div>

Using a simple for loop. no need for convertion

var imgs = document.querySelectorAll(".img");

for (let i = 0; i < imgs.length; i++)
  imgs[i].addEventListener('mouseover', function () {
    this.textContent = "images/image" + (i + 1) + "_2.jpg";
  });
div {
  width: 200px;
  height: 30px;
  float: left;
  margin: 5px 1em;
  font-weight: bold;
  color: white;
  text-shadow: 1px 1px 0 black;
}
<div class="img" style="background: #234;"></div>
<div class="img" style="background: #7fb;"></div>
<div class="img" style="background: #ace;"></div>
<div class="img" style="background: #d8f;"></div>
<div class="img" style="background: #e6a;"></div>

