Hover Over Photos to Enlarge Them on ASP Page

Posted on 2014-03-30
Medium Priority
Last Modified: 2014-03-31
I have an ASP web page that holds ten thumbnail photos.  I want to be able to hover over the thumbnails and have an enlarged photo of each pop up.  I found some code to do this at http://cssdemos.tupence.co.uk/image-popup.htm.  One of the problems I am having is the sample code requires an unordered list of the thumbnails.  This is easy if your photos are statically held in an Images folder.  Mine are dynamic, served to the page inside recordsets; one for thumbnail photos (rsThumbs), and the other for enlargements of the thumbnails (rsLarge).

How can I move through these recordsets and create a <li> tag for each of the ten thumbnail photos and a <span> tag for each of the enlargements that are served?
If you follow the above link and see how the process works, it may take less time for you experts to understand my dilemma.  If, on the other hand, someone has an easier or better way to do this, I would love to hear it.

Question by:shanej
LVL 84

Accepted Solution

Dave Baldwin earned 1500 total points
ID: 39965587
Just use 'response.write' or <%=...%> to put the image file names in the 'src' attributes.
    <ul class="enlarge"> <!--We give the list a class so that we can style it seperately from other unordered lists-->

    <!--First Image-->
    <img src="<% response.write("image01s.jpg") %>" width="150px" height="100px" alt="" /> <!--thumbnail image-->
    <span> <!--span contains the popup image-->
    <img src="<% response.write("image01L.jpg") %>" alt="" /> <!--popup image-->
    <br /><% response.write("Image 1 caption") %><!--caption appears under the popup image-->

    <!--Second Image-->
    <img src="<%="image02s.jpg" %>" width="150px" height="100px" alt="" /> <!--thumbnail image-->
    <span> <!--span contains the popup image-->
    <img src="<%="image02L.jpg" %>" alt="" /> <!--popup image-->
    <br /><%="Image 2 caption" %><!--caption appears under the popup image-->


Open in new window


Author Closing Comment

ID: 39967908
I found another solution at http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P20/.  Thanks for your quick response with the limited info I gave you.

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

As with any other System Center product, the installation for the Authoring Tool can be quite a pain sometimes. This article serves to help you avoid making these mistakes and hopefully save you a ton of time on troubleshooting :)  Step 1: Make sur…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The view will learn how to download and install SIMTOOLS and FORMLIST into Excel, how to use SIMTOOLS to generate a Monte Carlo simulation of 30 sales calls, and how to calculate the conditional probability based on the results of the Monte Carlo …
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.
Suggested Courses

586 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question