The simplest way to do that is first find your main
My main image
750px and height is
So you just need to set
style property of
width and height for your
It will set
height for all images including the
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"
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