İdeasoft Tabanlı Bir Site'de Hoşuma Giden İçerik

Merhabalar,
http://www.kargilimobilya.com.tr/ bu sitede anasayfa slider'ın altında küçük 5-6 tane resim var. Üzerlerine gelince sistemdeki 2. eklenen resim görünüyor. hover olduğunda yani. Ben buna çok uğraşmıştım ama yapamamıştım. Bunu nasıl yapabiliriz acaba?

İlk resmi image.jpg, ikinci resmi image_2.jpg olarak kaydet. Daha sonra <img> tagı içine bu kodu yaz

 onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replace("_2.jpg", ".jpg")'

CSS ile yapılsa daha güzel olur bence. Geçiş efekti falan da eklenebilir rahatlıkla. Şöyleki: https://codepen.io/mapacarta/pen/XVdzjb

Hocam dün buraya yazan arkadaş uğraştı ama olmadı. ideasoft farklı bir şekilde çekiyor resimleri. Bende baya uğraştım ama yapamadım. Senin dediğin şekilde yapılır ondan sıkıntı yok ama şimdi vitrindeki ürünün ikinci resmi jpg olarak gelmemiş. Php den {resim_ikon1} {resim_ikon2} {resim_ikon3} {resim_ikon4} olarak gelmiş. Script yazmak gerekiyor. Dün baya uğraştık beceremedik vazgeçtim..