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.
Click to see large image



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="http://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a


This page was last modified on December 09, 2015



Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!


  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!