I want to change the product image on hover(on mouse over) by module. I have the gifpath field which contains the image. How I could add some event listiner to the xml or python? Don't really want to use a javascript for that, because it would be hard to sync that with database image.

templates.xml

<odoo>

    <data>
    <record id="product_product_inherit" model="ir.ui.view">
                <field name="name">product.template.inherit</field>
        <field name="model">product.template</field>
        <field name="inherit_id" ref="product.product_template_only_form_view"/>
        <field name="arch" type="xml">
            <field name="default_code" position="after">
                <field name="gifpath" widget="image"/>
            </field>
        </field>
              </record>

       <template id="website_sales_inh" name="webiste_sales_inherit" inherit_id="website_sale.products_item">

          <xpath expr="//span[@class='d-flex h-100 justify-content-center align-items-center']" position="replace">
            
              <span t-field="product.image_1920"
                        t-options="{'widget': 'image', 'preview_image': 'gifpath'}"
                        class="d-flex h-100 justify-content-center align-items-center"/>
          </xpath>

       </template>

    </data>

</odoo>

models.py

# -*- coding: utf-8 -*-

from odoo import models, fields, api


class imgtogif_r(models.Model):
    _inherit = ['product.template']
    gifpath = fields.Binary('gifpath')