Search code examples
javascripthtmlodoo

Changing image in the span tag in odoo without the id for the image

I need to change the picture on the mouseover. I have this code inside of odoo in products tab in the shop:

<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>

And only thing that changes between the products is data-oe-id. Problem is that, only span tag, inside of which image is, has the some reasonable id. But image don't. So, I guess I can't use the getelementbyid.

Additional question - How I could extract the gif name from the database, if I am using odoo, and it is a new module. Also, if it is possible, how I could call the javascript function from odoo module.

Solution

  • https://jsfiddle.net/jy51ascu/

    HTML(changed image only):

    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>