Solved

Need to add OnClick code to an ImageMap

Posted on 2011-02-24
11
1,093 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

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.
When you see single cell contains number and text, and you have to get any date out of it seems like cracking our heads.
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

738 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