Rollover Pop-Up Zoom With Caption
The JavaScript on this page will display the zoom/large image of
a thumbnail when the user mouses over it - a technique often called a "rollover". The idea is
similar to my PopZoom© code, but eliminates the pop-up window.
To implement this feature, add a script tag to the head section of your document that calls "rollPopZoom.js", and add the following attribute to the img tag for your thumbnail image:
onmouseover="rollZoomView(imagePath, imageWidth, imageHeight, captionText);"
where 'imagePath' is the path to the larger image file, 'imageWidth' and 'imageHeight' are the width and height of the larger image, and 'captionText' is the text you want displayed as a caption (if any). No other modifications to your pages are required, although it's best practice to add a noscript section around the thumbnail to provide users running with JavaScript disabled with a clickable link to the larger image. This page includes some code you can use as a guide.
Try it! Just mouse over the image of Mickey.
PopZoom© and RollPopZoom© are provided free of charge. If you use and appreciate this free software,
please place the following link in an appropriate location on your site:
a href="https://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a
This page was last modified on August 27, 2020
