Solved

Need to add OnClick code to an ImageMap

Posted on 2011-02-24
11
1,086 Views
Last Modified: 2012-05-11
I have an imagemap with 3 hotspots.  One downloads a .pdf, the other two redirect to two other websites.  Now they want to be able to track who downloads the .pdf file with our reporting program (VisiStat).  To do that, I have to add some code to the OnClick event of the .pdf hotspot.

<A ONCLICK="VSLT('MyFile.pdf')" TARGET="new" HREF="my-link.pdf">MyFile.pdf</A>

Open in new window


The code in the "VSLT('MyFile.pdf')" can be any name, that's just what shows up in the reports.
I've tried doing this with a code behind OnClick event handler, but it can't see the javascript included in the asp in the asp page:

<!--VISISTAT SNIPPET//-->
<script type="text/javascript">    var DID = 12345;</script>
<script src="http://sniff.visistat.com/sniff.js" type="text/javascript"></script>
<!--VISISTAT SNIPPET//-->

Open in new window


And I'm guessing that's where the VSLT() code is at.

I tried moving my code inline in the asp page, but it always says my sub is not a member of the page. What am I doing wrong? It seems like I'm just calling it or referencing it wrong.
The only code I have in it is an If/Else for the postback values.
0
Comment
Question by:carrefour
  • 6
  • 5
11 Comments
 

Author Comment

by:carrefour
ID: 34975233
Here is the imagemap code:

<center><asp:ImageMap ID="Green_Bar_ImageMap" runat="server" HotSpotMode="PostBack" OnClick="ImageMap_Click()" ImageUrl="http://www.somedomain.com/Images/Heart-RightBodyImage.gif" Height="828" Width="206" ImageAlign="Top" CssClass="Right_Column">
<asp:RectangleHotSpot AlternateText="End Stage Heard Disease and Palliative Care" PostBackValue="PDF" Top="321" Right="185" Bottom="520" Left="30"/>
<asp:RectangleHotSpot AlternateText="Source 1" PostBackValue="source1" Top="726" Right="192" Bottom="758" Left="30"/>
<asp:RectangleHotSpot AlternateText="Source 2" PostBackValue="source2" Top="780" Right="192" Bottom="798" Left="30"/>
</asp:ImageMap></center>

Open in new window



Here is the function to handle it (right now in-line in the page):

 
<script type="text/VBScript">
        Protected Sub ImageMap_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
                If (e.PostBackValue.Contains("PDF")) Then
                          VLST("HeartDiseaseWP.pdf")
                          Response.Redirect("http://www.somedomain.com/WhitePapers/HeartDiseaseWP.pdf")

                ElseIf (e.PostBackValue.Contains("source1")) Then
                           Response.Redirect("http://www.otherdomain.com/questions/end-stage-congestive-heart-failure")

                ElseIf (e.PostBackValue.Contains("source2")) Then
                            Response.Redirect("http://www.otherdomain.org/")
                End If
        End Sub
</script>
 

Open in new window

0
 
LVL 28

Expert Comment

by:strickdd
ID: 34982003
The "OnClick" function calls a method in the code-behind. You have to wire up the javascript method for this. This is most commonly done by adding the following OnPageLoad in the code-behind:

myControlID.Attributes.Add("onclick", "VSLT('MyFile.pdf')");

I'm not sure if this will work with the controls you are using, but you can try.
0
 

Author Comment

by:carrefour
ID: 34982272
There really are no controls.  The page is mainly two images, one is an image map with 3 hotspots.  So an imagemap is the only real 'control'.  I don't have access to the VSLT code or functions, just the included script that references it.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 28

Expert Comment

by:strickdd
ID: 34982455
Did you try adding this to the ImageMap control?
0
 

Author Comment

by:carrefour
ID: 34982688
I didn't figure that it would both call their code and still redirect.  I just tried it and get the same sort of error.  In the imagemap code it says that VSLT is not a member of the asp page and also an 'expression exprected' error in the imagemap code.

here is the imagemap code now:
<center><asp:ImageMap ID="Green_Bar_ImageMap" runat="server" HotSpotMode="Navigate" OnClick="VSLT('HeartDiseaseWP.pdf')" ImageUrl="http://www.ourdomain.com/Images/Heart-RightBodyImage.gif" Height="828" Width="206" ImageAlign="Top" CssClass="Right_Column">
   <asp:RectangleHotSpot AlternateText="End Stage Heard Disease and Palliative Care" Top="321" Right="185" Bottom="520" Left="30" NavigateUrl="http://www.ourdomain.com/WhitePapers/HeartDiseaseWP.pdf"/>
   <asp:RectangleHotSpot AlternateText="Source 1" Top="726" Right="192" Bottom="758" Left="30" NavigateUrl="http://www.otherdomain.com/questions/end-stage-congestive-heart-failure"/>
   <asp:RectangleHotSpot AlternateText="Source 2" Top="780" Right="192" Bottom="798" Left="30" NavigateUrl="http://www.otherdomain.org/"/>
</asp:ImageMap></center>

Open in new window

0
 
LVL 28

Expert Comment

by:strickdd
ID: 34982817
In .Net controls the "OnClick" declaration raises the Click event. Since VSLT() is not a method in your code-behind file, it is erroring. That is why you need to use the .Attributes.Add() method to get the javascript "onclick" method on the control.
0
 

Author Comment

by:carrefour
ID: 34983562
Ok, I follow what you are saying, but not sure I know how to do that.

If I am understanding correctly, in the PageLoad event, I need to have a line like this:

ImageMapID.Attributes.Add("onclick", "VSLT('MyFile.pdf')")

Then put the rest of the code in the OnClick event of the page behind?  I wrote it up once like that, but without the .Add().
0
 
LVL 28

Expert Comment

by:strickdd
ID: 34984237
The point is, the VSLT() is a javascript method contained withing the .js file. there is no server-side code associated with it.
0
 

Author Comment

by:carrefour
ID: 34984267
I understand that.  Will the .Add() method fix that?  In my last post, am I understanding correctly?
0
 
LVL 28

Accepted Solution

by:
strickdd earned 500 total points
ID: 34984934
I haven't tried a javascript onclick event on an ImageMap control, so this may or may not work. If it doesn't then you'll need to use a control set that can do what you need.
0
 

Author Closing Comment

by:carrefour
ID: 35010871
I didn't get the final fix.  The website got relocated before I could complete it but since this member was trying so hard to help me I think he deserved the points.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

680 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question