none
Display large image on rollover RRS feed

  • Question

  • I have a web page with a database displayed as a grid. One of the columns has a thumbnail image with a different image on each row. When the user moves the mouse over the image I would like to automatically dsiplay a larger image.

     

    Is there a relatively easy way of doing this?

    Sunday, June 27, 2010 12:27 PM

Answers

  •  

    You can easily do this using your style sheet's hover selector if you can accept that it will not work for IE6. It will work for any browser 8 years old or younger. First of all you need to create your larger image using a photo editing program and save it to a directory on your server. Example:

    <head>
    <style type="text/css">

    td.specialColumnName {background-image:url('yourDirctoryPath/YourSmallPhotoName.jpg'),
                                height:photoheightpx,
                                width:photoWidthpx}

    td.specialColumnName:hover {background-image:url('yourDirctoryPath/YourLargePhotoName.jpg'),
                                height:largePhotoheightpx,
                                width:largephotoWidthpx}

    </style>
    </head>

    <body>

    <table>    
             <tr class="firstRow"><td class="specialColumnName">My photo column</td></tr>
    </table>

    </body> 

     

    Your table-cell will need to be big enough to hold the larger image. The other way to do this is by placing an image tag inside the table-cell and letting the css hover selector operate on the source of the image. Then that row and column will expand to the size of the image.

     

     

     

    Sunday, June 27, 2010 3:47 PM
  • It just occurred to me that another thing you could do is to resize an image without knowing it's name. Load the larger image but force the displayed size to the smaller size and have the css hover resize it to the full size. For example in your css section:


    td image {width:80px}    // normal size thumb-nail

    td image:hover { width:300px } // larger size on hover

    // If you want the image to jump outside the td box add position absolute like:

    td image {width:80px; position:absolute}

     

    // with the position absolute you may need to define the size of the table cell discretely because it will mot have the thumb nail to shrink to, and you may need to define the cell to be position relative.

     

     

    Sunday, June 27, 2010 11:36 PM

All replies

  •  

    You can easily do this using your style sheet's hover selector if you can accept that it will not work for IE6. It will work for any browser 8 years old or younger. First of all you need to create your larger image using a photo editing program and save it to a directory on your server. Example:

    <head>
    <style type="text/css">

    td.specialColumnName {background-image:url('yourDirctoryPath/YourSmallPhotoName.jpg'),
                                height:photoheightpx,
                                width:photoWidthpx}

    td.specialColumnName:hover {background-image:url('yourDirctoryPath/YourLargePhotoName.jpg'),
                                height:largePhotoheightpx,
                                width:largephotoWidthpx}

    </style>
    </head>

    <body>

    <table>    
             <tr class="firstRow"><td class="specialColumnName">My photo column</td></tr>
    </table>

    </body> 

     

    Your table-cell will need to be big enough to hold the larger image. The other way to do this is by placing an image tag inside the table-cell and letting the css hover selector operate on the source of the image. Then that row and column will expand to the size of the image.

     

     

     

    Sunday, June 27, 2010 3:47 PM
  • Hi Thanks for your reply,

    I am not sure about this. The grid is displayed as a result of a database enauiry on a .aspx page, so I do not know  which pictures will be required until the results are displayed.

    A

     

    Sunday, June 27, 2010 4:33 PM
  • Hi Thanks for your reply,

    I am not sure about this. The grid is displayed as a result of a database enauiry on a .aspx page, so I do not know  which pictures will be required until the results are displayed.

    A

     


    In that case you will need to use javascript. You will need to write some additional server side script to fill a javascript array with the names of the large and small image and then on the client side the script can detect the mouse over and swap the image.
    Sunday, June 27, 2010 10:24 PM
  • It just occurred to me that another thing you could do is to resize an image without knowing it's name. Load the larger image but force the displayed size to the smaller size and have the css hover resize it to the full size. For example in your css section:


    td image {width:80px}    // normal size thumb-nail

    td image:hover { width:300px } // larger size on hover

    // If you want the image to jump outside the td box add position absolute like:

    td image {width:80px; position:absolute}

     

    // with the position absolute you may need to define the size of the table cell discretely because it will mot have the thumb nail to shrink to, and you may need to define the cell to be position relative.

     

     

    Sunday, June 27, 2010 11:36 PM
  • I have tried to do this, but the only way I can find to  access the image properties fis rom the grid view tasks  edit columns. I have tried adding the code direct, but this produces an error.

    The existing code for the image is

     

    <asp:imagefield
                    AlternateText="No Picture"
                    DataImageUrlField="Photo1"
                    HeaderText="Image" DataImageUrlFormatString="/database training site/images/{0}">
                    <ControlStyle Font-Size="Smaller" Height="100px" Width="100px" />
                    <ItemStyle Height="100px" Width="100px" />
                </asp:imagefield>

    Monday, June 28, 2010 7:46 AM
  • The code I gave you most recently has to go in the <style> section.That is in the <head> part of the document.


    Monday, June 28, 2010 3:18 PM
  • This is not exactly what you want to do, but if you understand the steps in this tutorial, you will most likely see how to recover the large image you want to be able to display on mouseover:

    http://www.homepagedoctor.com/expressiontutorials/LinkingMultiplePicturesToGridviewResults.htm



    ClarkNK, A.K.A. HomePage Doctor
    HomePageDoctor.com -- Expression Web database tutorials
    Ownertrades.com -- Created with FP, Access, Bots and Wizards
    MyNumbersTracker.com -- Created with Expression, VWDExress, SQL Express, and ASP.NET.
    Tuesday, June 29, 2010 2:09 PM