O'Reilly logo

ASP.NET jQuery Cookbook by Sonal Aneel Allana

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Viewing enlarged images on mouseover on thumbnail

In this recipe, let's see how to view enlarged images on mouseover on the thumbnails.

Getting ready

  1. Add a new web form Recipe4.aspx to the current project.
  2. Add a couple of Image controls to the page. Define a css class thumbnail as shown next and set the CssClass of the Image controls to this class:
    .thumbnail
    imageenlarged images, viewing on thumbnails{
    position:relative;
    width:100px;
    height:68px;
    }
    
  3. Create a div area below the Image controls where we will display the enlarged image:
    <div id="imgContainer" ></div>
    
  4. Create a css style for the enlarged image as follows:
    .image
    {
    position:relative;
    width:400px;
    height:250px;
    }
    

Thus, the complete ASPX markup for the form is as follows:

<form id="form1" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required