Question Imagemap with Modal popup, shows modal popup on un mapped areas

potalibaba

New member
Joined
Dec 16, 2012
Messages
2
Programming Experience
5-10
Hi,
I have used imagemap with ajax modal pop up extender. I want to display modal pop up on cerntain region in image. I successfully added polygon cordinates using hotspot attribute of imagemap. I can also display modal popup (some buttons based on panel) when I click on mapped polygon.

However problem is, modal popup is getting displayed even when I click anywhere on image. How can I stop modal popup to be disable on clicking on other image area.
 
I suspect this is down to how you're triggering the modal - if you post the relevant code we can likely point you in the right direction pretty quickly.
 
Hi,
Thanks for reply. below is the polygone code from where I am calling

VB.NET:
<form id="form1" runat="server">
    <div>
    
        <table align="center" 
            
            
            style="padding: 5px 20px 20px 20px; background-position: center; height: 886px; background-repeat: repeat-x; position: absolute;">
            <tr>
                <td class="style3" align="center">
                    <%--  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">s
                        <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">--%>
                       <asp:ImageMap ID="ImageMap1" runat="server" 
                        ImageUrl="~/Images/pictures1.png" ImageAlign="Middle" 
                       >
                                                
                    <asp:PolygonHotSpot Coordinates="413,551,355,579,327,630,331,687,355,653,401,625,453,629,498,651,525,676,532,642,514,596,468,560,437,551,426,550" AlternateText="Institute" NavigateUrl="javascript:showModal(0);" HotSpotMode="Navigate" PostBackValue="Institute"/>
                    
                                                    
                    
                    </asp:ImageMap>
                    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
                    </ajaxToolkit:ToolkitScriptManager>

                    </td>
            </tr>
        </table>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
            TargetControlID="ImageMap1"  PopupControlID="Panel1" DropShadow="False" 
            BehaviorID="mapping" Enabled="False" >
        </ajaxToolkit:ModalPopupExtender>


    </div>
    <asp:Panel ID="Panel1" runat="server" Height="113px" Width="320px" Visible="True" >
        <table align="center" class="style1" 
            style="background-image: url('Images/blue.PNG'); height: 158px;">
            <tr>
                <td class="style2" style="background-color: #99CCFF">
                     </td>
                <td align="center" 
                    style="background-color: #99CCFF; font-family: 'Trebuchet MS'; color: #0033CC;">
                    Login</td>
            </tr>
            <tr>
                <td class="style2" 
                    style="background-color: #99CCFF; font-family: 'Trebuchet MS'; color: #0033CC;">
                    User name</td>
                <td style="background-color: #99CCFF">
                    <asp:TextBox ID="TextBox1" runat="server" Width="235px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2" 
                    style="background-color: #99CCFF; font-family: 'Trebuchet MS'; color: #0033CC;">
                    Password</td>
                <td style="background-color: #99CCFF">
                    <asp:TextBox ID="TextBox2" runat="server" TextMode="Password" Width="235px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2" 
                    style="background-color: #99CCFF; font-family: 'Trebuchet MS'; color: #0033CC;">
                     </td>
                <td style="background-color: #99CCFF">
                    <asp:Button ID="Button1" runat="server" Text="Login" />
                             
                    <asp:Button ID="Button2" runat="server" Text="Exit" />
                </td>
            </tr>
            <tr>
                <td class="style2" 
                    style="background-color: #99CCFF; font-family: 'Trebuchet MS'; color: #0033CC;">
                     </td>
                <td style="background-color: #99CCFF">
                    <asp:Label ID="lblerror" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </asp:Panel>
    </form>

and below the javascript function

VB.NET:
function showModal(index)
     {
            
         var modal = $find("mapping");
         modal.show();

     }



above name "mapping" is the behaviour id.
plz advise how can i fix this.
 
Last edited:
Back
Top