Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Bryan Stone
150
WebImageViewer - Popup & Expand image on Hover?
posted

I have tried using the HoverImageUrl property for this effect, but it does not appear to do anything.  Can someone explain how I would accomplish this? 

I want a VERY straightforward and simple implementation where the user can move their mouse over the image and after a second or two, they get a full resolution version of the image they are over.

Is this possible?

Thanks,

Bryan

Parents
  • 4493
    Verified Answer
    posted

    Hello Bryan,

    The purpose of HoverImageURL is to define an image, to replace the original one on hover. But not to popup. For example default images can be colorless (black and white), and hover images can be colored.

    There is no strightforward way to achieve this. However you can relatively easily achieve changing SRC attribute, of predefined image on the page, on hovering image from ImageViewer. Here are simple steps:

    1. Define Key property for each and every ImageItem you define within Items collection of WebImageViewer. Example:

     

     

    <

     

    ig:ImageItem Key="0" ImageUrl="http://..." />
    <ig:ImageItem Key="1" ImageUrl="http://..." />
    <ig:ImageItem Key="2" ImageUrl="http://..." />

    2. In JavaScript code define and array which holds the full resolution images URLs with corresponding Keys. Example:

     

     

     

     

     

     

     

     

     

     

     

    <script language="javascript" type="text/javascript">|
    var fullReoslutionImages = [];
    fullReoslutionImages[0] =     "http://...";
    fullReoslutionImages[1] =     "http://...";
    fullReoslutionImages[2] =     "http://...";
    </script>

    3. Put static empty image on suitable place on the page and define ID for it. Example:

     

     

    <img id="largeImage" src="empty.gif" alt="" />

    4. Handle ImageMouseOver client event for WebImageViewer in similar to this method:

    First say that you want to handle this event:
    <ClientEvents ImageMouseOver="imOver" />

    Then define the handler itself:

     

     

     

     

     

     

     

     

     

     

     

     

    <script language="javascript" type="text/javascript">

     

     

    function imOver(iViewer, eventArgs)
    {
    var item = eventArgs.getImageItem();
    var key = item.get_key();
    $get(    'largeImage').src = fullReoslutionImages[key];
    }

     

     

    </script>

    Hope this helps

Reply Children
No Data