The simplest way to do that is first find your main image width and height dimensions
My main image width is 750px and height is 500px
So you just need to set style property of width and height for your img tag
It will set width and height for all images including the onmouseover and onmouseout all three images will display with same dimesion
<img style="width: 750px; height: 500px;" src="https://images.unsplash.com/photo-1592134959663-4cdd34840e63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
onmouseover="this.src='https://images.unsplash.com/photo-1592101872812-cdbbe7912bfb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60';"
onmouseout="this.src='https://images.unsplash.com/photo-1592081164105-70c567c6cfa2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60';">
I am currently using onmouseover and onmouseout to shown a different image on mouse hover.
The onmouseover images have different dimensions to the onmouseout images so when the image is hovered over it changes the page layout.
here is an example of the code I currently have:
<img src="images/image.png" onmouseover="this.src='images/image2.png';" onmouseout="this.src='images/image.png';">
Is there a way of setting the onmouseover image to conform to the width of the onmouseout image and as a result not change the page layout?
(I am very new to all this so please bear with me)
Thank you, I am using percentage width to make the site scalable, I am struggling to get the correct percentage for each image, is there another way to do this?
Sure, I am creating a catalog for my clothing brand, when you hover on the image it zooms into the design. I have used tables to lay the images out. I then wanted it so that when the document was reduced it started reducing the number of columns, from 4 then 3, 2 and 1 for mobile, for this I used
…For the 4 column table I have managed to get the hover images working by editing them to be the same size as a containing
