I have an image map that portrays 5 steps in a process.
When one of the locations in the image map is clicked I would like to associate a new image with the image map
That is identical to the original image except a different 'box' is highlighted, corresponding to the new step in
the process. Was not sure how to do this. Thank you.
Code:
<%@ Page Title="" Language="VB" MasterPageFile="~/secureds.master" AutoEventWireup="true" %><%@ Register src="../MonthDateYear.ascx" tagname="MonthDateYear" tagprefix="uc1" %><script runat="server"> Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If IsPostBack = True Then End If End Sub Protected Sub StepImageMap_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs) Select Case e.PostBackValue Case "1" MultiView1.ActiveViewIndex = "0" Case "2" MultiView1.ActiveViewIndex = "1" Case "3" MultiView1.ActiveViewIndex = "2" Case "4" MultiView1.ActiveViewIndex = "3" Case "5" MultiView1.ActiveViewIndex = "4" End Select End Sub </script><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <p>Go To <asp:ImageMap ID="StepImageMap" runat="server" ImageUrl="~/Images/step_property.gif" onclick="StepImageMap_Click"> <asp:RectangleHotSpot AlternateText="Property Step" Bottom="70" HotSpotMode="PostBack" Left="50" PostBackValue="1" Right="100" Target="_self" Top="20" /> <asp:RectangleHotSpot AlternateText="Purchaser Step" Bottom="70" HotSpotMode="PostBack" Left="120" PostBackValue="2" Right="170" Target="_self" Top="20" /> <asp:RectangleHotSpot AlternateText="Offer Step" Bottom="70" HotSpotMode="PostBack" Left="200" PostBackValue="3" Right="250" Target="_self" Top="20" /> <asp:RectangleHotSpot AlternateText="Financial Step" Bottom="70" HotSpotMode="PostBack" Left="260" PostBackValue="4" Right="310" Target="_self" Top="20" /> <asp:RectangleHotSpot AlternateText="Other Step" Bottom="70" HotSpotMode="PostBack" Left="340" PostBackValue="5" Right="390" Target="_self" Top="20" /> </asp:ImageMap> </p> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="StepImageMap" EventName="Click" /> </Triggers> <ContentTemplate> <asp:MultiView id="MultiView1" ActiveViewIndex="0" Runat="server"> <asp:View ID="View1" runat="server" > <h1>Property</h1> <asp:Label ID="Label10" runat="server" Text="Select Property"></asp:Label> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/addproperty.aspx" >Add Property</asp:HyperLink> <br /> <asp:ListBox ID="lboProperty" runat="server" Height="100px" Width="330px"></asp:ListBox> <br /> <p>When was property last viewed?</p> <p> <uc1:MonthDateYear ID="MonthDateYear1" runat="server" /> </p> <p> </p> <br /> <asp:Button id="btnNext" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View2" runat="server" > <h1>Purchaser</h1> <p> <asp:Label ID="Label3" runat="server" Text="Purchaser"></asp:Label> </p> <p> <asp:Label ID="Label12" runat="server" Text="First Name *"></asp:Label> <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> <asp:Label ID="Label13" runat="server" Text="Last Name *"></asp:Label> <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> </p> <p> <asp:Label ID="Label15" runat="server" Text="Co-Purchaser"></asp:Label> </p> <p> <asp:Label ID="Label16" runat="server" Text="First Name"></asp:Label> <asp:TextBox ID="TextBox5" runat="server"></asp:TextBox> <asp:Label ID="Label17" runat="server" Text="Last Name"></asp:Label> <asp:TextBox ID="TextBox6" runat="server"></asp:TextBox> </p> <p> <asp:Label ID="Label20" runat="server" Text="Guarantor"></asp:Label> </p> <p> <asp:Label ID="Label21" runat="server" Text="First Name"></asp:Label> <asp:TextBox ID="TextBox7" runat="server"></asp:TextBox> <asp:Label ID="Label22" runat="server" Text="Last Name"></asp:Label> <asp:TextBox ID="TextBox8" runat="server"></asp:TextBox> </p> <p> * Required</p> <br /><br /> <asp:Button id="Button5" Text="Back" CommandName="PrevView" Runat="server" /> <asp:Button id="Button2" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View3" runat="server" > <h1>Offer</h1> <p> <asp:Label ID="Label1" class="formlabel" runat="server" Text="Offer Amount"> </asp:Label> <asp:TextBox class="formtextbox" ID="txtOfferAmount" runat="server"> </asp:TextBox> </p> <p> <asp:Label ID="Label2" class="formlabel" runat="server" Text="% Down"> </asp:Label> <asp:TextBox class="formtextbox" ID="TextBox1" runat="server"> </asp:TextBox> <asp:Label ID="Label4" class="formlabel" runat="server" Text="(Required Minimum Down)"> </asp:Label> </p> <asp:Label ID="Label5" class="formlabel" runat="server" Text="Suggested Closing Date"> </asp:Label> <p> <asp:RadioButtonList ID="RadioButtonList1" runat="server" > <asp:ListItem>ASAP</asp:ListItem> <asp:ListItem>Flexible</asp:ListItem> <asp:ListItem>On Specific Date</asp:ListItem> </asp:RadioButtonList> </p> <p> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </p> <p> * Required </p> <br /><br /> <asp:Button id="Button6" Text="Back" CommandName="PrevView" Runat="server" /> <asp:Button id="Button3" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View4" runat="server" > <h1>Financial</h1> Income for last 2 years Employment History (Salary, Bonus, Time at current position) Pre-Approval Letter (upload) Net Worth Statement <asp:Label ID="Label7" runat="server" Text="Mortgage Pre-Approval"></asp:Label> <p><asp:FileUpload ID="FileUpload2" runat="server" /></p> <p><asp:Label ID="Label6" runat="server" Text="Financial Form"></asp:Label> <asp:FileUpload ID="FileUpload1" runat="server" /></p> <br/> <asp:Button id="Button7" Text="Back" CommandName="PrevView" Runat="server" /> <asp:Button id="Button4" Text="Next" CommandName="NextView" Runat="server" /> </asp:View> <asp:View ID="View5" runat="server" > <h1>Other</h1> <p>Second Home</p> <p>Special Conditions</p> <p>Pets</p> <asp:Button id="Button8" Text="Back" CommandName="PrevView" Runat="server" /> <asp:Button text-align="center" ID="Button1" runat="server" Text="Submit" /> </asp:View> </asp:MultiView> </ContentTemplate> </asp:UpdatePanel> </div> </asp:Content>