Solved

Defining a clickable region in code behind?

Posted on 2007-04-10
6
331 Views
Last Modified: 2010-08-05
I'm wondering if this is possible.

I'm using GDI+ to draw a location on an image that reflects that current location of an office. I have already defined the coordinates obviously, so is there a way to create a clickable or hover region in code behind that I can leverage on the querystring information I am passing?

Here is the code I currently have.

 Public Sub Highlight()
        Dim oCanvas As Drawing.Bitmap = Drawing.Bitmap.FromFile(Server.MapPath("App_Data\Maps\24thFloorMap.jpg"))
        Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(oCanvas)
        Dim Office As Rectangle

        If OfficeNumber = "2465" Then
            Dim Office2465 As Rectangle = New Rectangle(98, 90, 48, 120)
            Office = Office2465
        End If

        g.FillRectangle(New SolidBrush(Color.FromArgb(100, 0, 128, 255)), Office)

        Response.ContentType = "image/jpeg"
        oCanvas.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg)
        Response.End()
0
Comment
Question by:ApexCo
[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
  • 3
  • 3
6 Comments
 
LVL 3

Expert Comment

by:dmagliola
ID: 18887671
From your code i'm assuming you have an .aspx page that has an <img src="xxx.aspx" (or .ashx) that requests the code you just showed instead of requesting a static image.

If that's what you're doing, you won't be able to output "region" data into that same image (after all you're just feeeding a JPG file to the browser).
What you CAN do is define an area (with a good old fashioned map, or with a floating, transparent, absolutely positioned <div>) in the ASPX page that will contain this image.

One problem is the sharing of coordinate information between the two, if obtaining this coordinates involves some logic (mainly to avoid duplicating code). One way to do it is through Session variables. (Keep in mind that the image will ALWAYS load later than the containing page). Another is to add querystring values in the <img> tag, but make sure that this doesn't pose a security risk (ie. that these values you're passing are not "secrets", and that tampering with them won't break your DB / server / etc)

I'm not exactly sure what "level" of information you need for this. What you're doing up there is not trivial, so I guess this overview will be enough to point you in the right direction.
If you have any doubts, however, or I haven't explained myself well, please don't hesitate to let me know and i'll help you.
0
 
LVL 8

Author Comment

by:ApexCo
ID: 18888917
Hi and thanks for the comments.

Right now the .aspx page is completely blank and I'm feeding the image to the browser through the code above. This is required to draw the rectangle the way I have it is it not?

Also, I'm aware of using an old school <map>, but I had hesitated because I am targeting IE6 here at work so I don't think that will work. If the GDI+ code loads up after the page loads I'll cover up those coordinates with the canvas I am creating won't I? I don't even know if using a transparent PNG will work like this for me.

So since I am doing the drawing in the code behind to highlight the actual office on the map I was hoping for a way to do it within the code behind to keep it simple. Is what I'm asking for impossible?

In the end my goal is to implement some NetFlix style hovers over the office and show the person's picture, name, phone number and I can get all that through the querystring values from the referring page. My big hangup is defining the regions. Maybe I don't need to setup the oCanvas? Can the GDI+ work on an image that is defined in the .aspx page instead of within the code itself?

Thanks for your help, I appreciate it.
0
 
LVL 3

Accepted Solution

by:
dmagliola earned 250 total points
ID: 18891731
I see, let me rephrase that.
The .aspx page that generates the Jpeg file is blank, of course.
But how are you showing that image in your website?

I'm assuming there is ANOTHER aspx page that has an image tag pointing to the "image aspx page"
(The other only way I can think of it linking directly to the address, in which case the browser only shows the image. If that is the case, then this can't be done, you need to add an intermediate page with the <img> tag, but this wouldn't be the normal way of displaying an image.)

This other aspx page (the one with the <img> tag) should be the one responsible for generating this hotspot.

about maps, you shouldn't worry about IE6, they still work, but i do agree they are "old-fashioned".

I would do this: where you have the <img> tag for showing the image, i'd put this HTML code:

<div class="mapContainer">
  <img src="xxx.aspx?id=yyy" />
  <a class="mapHotSpot" href="xxx" style="left: xxx; top: yyy; width: aaa; height: bbb;"></a>
</div>

The "style=" in the HotSpot div must be generated by the ASPX code of the page hosting the image, positioning it in the right place inside the image.
Then, in your CSS, add this:

.mapContainer {
  position: relative;
  width: xxx; height: xxx; /* Adjust to the size of your image */
  /* you MUST specify height, otherwise this won't work in IE */
}
.mapHotSpot {
  position: absolute;
  display: block;
  z-index: 100;
}

That is probably not 100% of the solution, but that should get you going in the right direction.
If you have questions, please don't hesitate to ask.
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 8

Author Comment

by:ApexCo
ID: 18899973
Interesting idea you have there, but I don't think I'm not being clear enough for you.

ASPX page:  There is no code here, simply the default skeleton you get when you create a new page. What I am doing is checking what floor they are on from the main directory page, then opening the aspx page entitled floor24.aspx. On this page there is nothing.

However, in the code-behind is where I am doing all of my work. Take a look at this again:

Public Sub Highlight()
        Dim oCanvas As Drawing.Bitmap = Drawing.Bitmap.FromFile(Server.MapPath("App_Data\Maps\24thFloorMap.jpg"))
        Dim g As Drawing.Graphics = Drawing.Graphics.FromImage(oCanvas)
        Dim Office As Rectangle

        If OfficeNumber = "2465" Then
            Dim Office2465 As Rectangle = New Rectangle(98, 90, 48, 120)
            Office = Office2465
        End If

        g.FillRectangle(New SolidBrush(Color.FromArgb(100, 0, 128, 255)), Office)

        Response.ContentType = "image/jpeg"
        oCanvas.Save(Response.OutputStream, Drawing.Imaging.ImageFormat.Jpeg)
        Response.End()

You can see that I am actually using the GDI+ to create the path and draw the image right onto the page, it's almost like doing a respond.write with the path. You can also see were I have defined the coordinates for the rectangle that I fill in with a nice blue color so it's obvious where that office is located.

The problem with using anything else on the page is that the GDI+ routine stacks the map on top of everything else I might have on there. So that is why I am looking to try and attempt this in the code-behind. If it's not possible, I might go with just creating some other kind of GDI+ area and bringing that up with name/picture/phone etc.

Do you see what I am really trying to do now? I apologize for not being clear.

Just to recap. There is no code on the aspx page, everything is being done with GDI+ in the code behind. I am aware I might be stretching it a bit, but my ideal solution would be using the coordinates I am already using in GDI+ to define that rectangle for each office, if it is even possible.

Thanks again for helping me and trying to think through this.
0
 
LVL 3

Expert Comment

by:dmagliola
ID: 18900498
I do understand what you're doing. I understand it perfectly well, and I'm suggesting an alternative solution, because what you want to do is not possible.

You are feeding a JPG file to the browser.
Independently of the fact that you're doing this inseide a "page", what the browser gets is a JPG file, not an HTML file.

What you need to do is have an HTML file, that will have an <img> tag, with it's src pointing to the ASPX file you're using to generate the picture.
That way, you have a PAGE in the browser, not an image, and you can impose anything then.
If you're just feeding an image to the browser, there is nothing to do.

I really don't know how to explain this any clearer.
0
 
LVL 8

Author Comment

by:ApexCo
ID: 18901081
Ok, I'm with you now, I misunderstood what you were trying to say...the joys of intraweb communication.

I'm going to work with the solution you posed earlier and award you points based on that because I think that will do what I need in the end.

Thanks for your valuable time, it is appreciated.
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

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

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

730 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