Changer l'image dans le tag span dans odoo sans l'id de l'image

Question

J'ai besoin de changer l'image au passage de la souris. J'ai ce code dans odoo dans l'onglet produits de la boutique :

<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"><img src="/web/image/product.template/2/image_256/A4Tech%20Bloody%20V8M?unique=0a360e4" class="img img-fluid" alt="A4Tech Bloody V8M"/></span>

Et la seule chose qui change entre les produits est le data-oe-id. Le problème est que seule la balise span, à l'intérieur de laquelle se trouve l'image, a un identifiant raisonnable. Mais l'image ne l'a pas. Donc, je suppose que je ne peux pas utiliser getelementbyid.

Question supplémentaire - Comment pourrais-je extraire le nom du gif de la base de données, si j'utilise odoo et que c'est un nouveau module. De même, si c'est possible, comment puis-je appeler la fonction javascript à partir du module Odoo ?

Answer 1

https://jsfiddle.net/jy51ascu/

HTML(image modifiée seulement) :

let image = document.querySelectorAll('span[data-oe-id="2"] img');

image[0].addEventListener("mouseover", function( event ) {
  event.target.src = "https://via.placeholder.com/100x100?text=2";
}, false);

<span data-oe-model="product.template" data-oe-id="2" data-oe-field="image_1920" data-oe-type="image" data-oe-expression="product.image_1920" class="d-flex h-100 justify-content-center align-items-center"> <img src="https://via.placeholder.com/100x100?text=1" class="img img-fluid" alt="A4Tech Bloody V8M" /></span>