javascriptのmouseoverで画像の差し替えを行いたい

Question

#前提・実現したいこと
javascriptのmouseoverで画像の差し替えを行いたいのですが、うまく差し替えることができません。ご教授いただけると幸いです。
#該当のソースコード

  function index(){
  const cat = document.getElementById("cat-icon");
  cat.addEventListener("mouseover",function(){
    cat.setAttribute("image_tag","cat2.png");
  }); 
};
window.addEventListener("load",index);

<%= link_to('#', class: 'cat-btn') do %>
  <div class='cat-btn-text'>募集する</div>
  <%= image_tag 'cat.png' ,class: "cat-btn-icon" , id: "cat-icon"%>
<% end %>

#試したこと
cat2.pngの部分をapp/images/cat2.pngに変えてみたりした。

#補足情報（FW/ツールのバージョンなど）
cat2.pngはapp/imagesの中にあります。
consoleにエラーは出ていません。

Answer 1

at.setAttribute("image_tag","cat2.png");

↓

at.setAttribute("src","cat2.png");

または、

at.setAttribute("src","app/images/cat2.png");