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
Thanks Anton!
I actually figured out that my HoverImageUrl wasn't working because of a startup page script that was missing a semi-colon (which prevented the AJAX javascript engine from initializing!).
Once I had that working, I was able to see it WASN'T what I needed and used the same technique you just detailed for showing my full-res image in an absolute positioned DIV.
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:
Hope this helps