Saturday, March 10, 2012

Use mouseover to bring up dynamic content

yes, you can use hovermenu from ajax control toolkit to achieve similar result.

http://ajax.asp.net/atlastoolkit/HoverMenu/HoverMenu.aspx


The MS AJAX Toolkit HoverMenu control will work but doesn't have quite the customizations that the Animation Extenders now have. You could utilize the folowing.

<atlasToolkit:AnimationExtender ID="animEx1" runat="server"> <atlasToolkit:AnimationProperties TargetControlID="CatalogItem1"><Animations> <OnMouseOver>
<Animation>
<Sequence>
<StyleAction AnimationTarget="popupImg" Attribute="display" Value="block" />

</Sequence>


</Animation
</OnMouseOver> </Animations>
</atlasToolkit:AnimationProperties></atlasToolkit:AnimationExtender>
<asp:Image id="CatalogItem1" ImageUrl="images/item1.jpg" runat="server" /
<div id="popupImg" style='display:none;'>
<asp:Image id="quickLook" ImageUrl="images/quickLook.jpg" OnClick="DoSomething" runat="server />
</div>

You then could do another AnimationProperties inside of the AnimationExtender and attach it to the quickLook image control at which point
there is an OnMouseOver you could run a <ScriptAction> that would run a custom JS function to change the SRC of the image control.

Check outhttp://ajax.asp.net/atlastoolkit/Animation/Animation.aspx and alsohttp://ajax.asp.net/atlastoolkit/Walkthrough/UsingAnimations.aspx

Have fun!

Let me know how it turns out.
JoeWeb

Forgot to mention... you'll need to do the following to hide the image... der!
.........
...</OnMouseOver>
<OnMouseOut>
<Animation>
<Sequence>
<StyleAction AnimationTarget="popupImg" Attribute="display" Value="none" />
</Sequence>
</Animation>
</OnMouseOut
Probably also want to set the position:absolute for popupImg in the style area and set the z-index and also position it on top of the image.

No comments:

Post a Comment