Increase Image Sizes on Mouse Hover
This Html code snippet enables the user to see another image when hovering or clicking on the original image.
You can use this to increase the size of the original image or show a different image.
Both images must be present in your “images” folder on the server.
The images can be resized by the browser, one drawback with this however is that the image will become distorted if the resize is too large or not the relative size to the original.
Far better then to resize the image yourself to the exact size you wish to be displayed on hover.
The alignment of “right” in the code can be changed to “left” or “center” if you wish.
Here is the code, this code is wrapped but should to be on one line in the Html code view of your web editor.
<img src=”images/kitchen150.jpg” alt=”Kitchen” width=”150″ height=”113″hspace=”10″align=”right” onmouseover=”this.src=’images/kitchen600.jpg‘;this.height=450;this.width=600″ onmouseout=”this.src=’images/kitchen150.jpg‘;this.height=113;this.width=150″>
The red text signifies the path and name of your own images and you need to change this to suite the actual path and name of your images. I.E. image folder/my image.
The blue text signifies the alt tags for the browser should your image not show.
The green text signifies the alignment of the image on the page and can be changed to “right” or “center” depending on where you need the image to appear on the page.
You don’t have to insert the image sizes if you don’t want to but I always find it ’s better to do so, even though I have previously resized the images in my image editor.
The example I have used is for a site I created for a business I run at Professional Joinery.co.uk have a look at the index page, you will see two examples of the Html code snippet there.
Ken Trueman.
Comments are closed, but trackbacks and pingbacks are open.