Swap images with user interaction in Microsoft Expression Web 2

Posted by: Minal Agarwal , on 5/3/2009, in Category Expression Web
Views: 32243
Abstract: Behaviors in Microsoft Expression Web are scripts that enable you to add interactivity to your elements. When you add behavior to an element, Expression Web adds a JavaScript code for that behavior, to your page. In this article we will learn how to add a behavior to swap images without having to write a single line of code.
Swap images with user interaction in Microsoft Expression Web 2
 
We have already explored behaviors in my article: Adding Behaviors to page elements in Microsoft Expression Web 2. A behavior is a combination of an event and an action that occurs when a user interacts with the web page or any element of the page. Behaviors in Microsoft Expression Web are time saving scripts that enable you to easily add some common tasks that could be performed by interactivity. With that basic knowledge, now we will see how to swap images by user interaction.
Behaviors in Microsoft Expression Web are scripts that enable you to add interactivity to your elements. When you add behavior to an element, Expression Web adds a JavaScript code for that behavior, to your page. In this article we will learn how to add a behavior to swap images without having to write a single line of code.
 
To insert an image and add a swap behavior to it
1.    Create a new page or open an existing page where you want to add a behavior.
 
2.    Go to Insert menu, choose Picture…, browse to your pictures folder, choose picture file and click OK. Enter an Alternate text for the image and click OK.
 
3.    Go to Task Panes menu and choose Behaviors. The Behaviors task pane will now appear besides your Apply/Manage Styles task pane.
 
4.    Select the image. In Behaviors task pane, click on Insert button. From the drop down, choose Swap Image.
    
Swap Image
5.    In the Swap Images dialog box, browse to the Swap Image URL: Check the options Preload Images and Restore on ‘mouseout’ event. Preload images would load all the images while loading the page. Restore on ‘mouseout’ event will automatically set the image back to original on ‘mouseout’ event. You can change this event later. Click OK.
Swap Image Event
6.    In the Behaviors task pane you will find two events and behaviors (actions). See image below:
 
Behaviours
Swap Images event, swaps the image ‘onmouseover’ and Swap Image Restore will reset the image to original ‘onmouseout’.
7.    To change the events, select the event, click on the down arrow and choose a new event from the list. For instance choose; ‘ondblclick’ to Swap images and ‘onclick’ to Swap Image Restore.
Events and Actions
8.    Save the page and preview it in the browser. Your behavior will now be active. The original image would be displayed as below:
 
Origional Image
 
When you double click on the image, it will be swapped with the image displayed below:
 
Swap Image
 
I hope this article was helpful and I thank you for viewing it. 
If you liked the article,  Subscribe to the RSS Feed or Subscribe Via Email  

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook