title: Change multiple images on mouse over , with one function
body: <p>I have an Exercise to querySelect the image from the HTML and change it on mouseover , I did that correctly like this :</p>
  
  <pre><code>var img = document.querySelector("#image1").addEventListener('mouseover' ,function (){
  this.src="images/image1_2.jpg")}
  </code></pre>
  
  <p>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 :</p>
  
  <pre><code>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"
  })
  </code></pre>
  
  <p>, but I need to do it with one function , any hint on how to do it ?</p>