Solved

Need to add OnClick code to an ImageMap

Posted on 2011-02-24
11
1,038 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
This article is the result of a quest to better understand Task Scheduler 2.0 and all the newer objects available in vbscript in this version over  the limited options we had scripting in Task Scheduler 1.0.  As I started my journey of knowledge I f…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

759 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now