Adding attributes to Image Map Hot Spots

Posted by Vsnmurthy.vepa under ASP.NET on 9/7/2007 | Views : 15363 | Status : [Member] | Replies : 2

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

I have a doubt regarding adding attributes to Image Map Hot Spots.

e.g. ASP.NET code for Image Map is

<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/flower1.jpg" Width="400" Height="400">
<asp:RectangleHotSpot AlternateText="1" HotSpotMode="PostBack" PostBackValue="1" Top="0" Bottom="225" Left="0" Right="150" />
<asp:RectangleHotSpot AlternateText="2" HotSpotMode="PostBack" PostBackValue="2" Top="0" Bottom="225" Left="151" Right="300" />
</asp:ImageMap>

after rendering it will be converted like this

<img id="ImageMap1" onclick="return ShowImagePart(this.id)" src="flower1.jpg" usemap="#ImageMapImageMap1" style="height:400px;width:400px;border-width:0px;" /><map name="ImageMapImageMap1" id="ImageMapImageMap1">
<area shape="rect" coords="0,0,150,225" href="javascript:__doPostBack('ImageMap1','0')" title="1" alt="1" /><area shape="rect" coords="151,0,300,225" href="javascript:__doPostBack('ImageMap1','1')" title="2" alt="2" />
</map>

If we use HTML image directly instead of Image Map we can add onclick event(client side) to area tag. But how can we add the same event to HotSpot tag in ImageMap

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Sheonarayan on: 9/7/2007 [Administrator] HonoraryPlatinum

0	Hi Below is the solution of your problem with working code. // Image map code <asp:ImageMap runat="server" ID="om1" ImageUrl="images/image.bmp"> <asp:RectangleHotSpot NavigateUrl="javascript:ShowHide()" Top="30" Bottom="50" Left="100" Right="200" /> </asp:ImageMap> // Client side javascript code <script language="javascript"> function ShowHide() { alert("client side script worked well"); } </script> Thanks Sheo Regards, Sheo Narayan http://www.dotnetfunda.com Vsnmurthy.vepa, if this helps please login to Mark As Answer. \| Alert Moderator

Hi

Below is the solution of your problem with working code.

// Image map code

<asp:ImageMap runat="server" ID="om1" ImageUrl="images/image.bmp">

            <asp:RectangleHotSpot NavigateUrl="javascript:ShowHide()" Top="30" Bottom="50" Left="100" Right="200" />

        </asp:ImageMap>

// Client side javascript code

<script language="javascript">

        function ShowHide()

        {

            alert("client side script worked well");

        }    

    </script>

Thanks
Sheo

Regards,
Sheo Narayan
http://www.dotnetfunda.com

Vsnmurthy.vepa, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sheonarayan on: 9/11/2007 [Administrator] HonoraryPlatinum

0	Hey Let me know if my answer solved your problem. Thanks Regards, Sheo Narayan http://www.dotnetfunda.com Vsnmurthy.vepa, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts