Solved

Defining a clickable region in code behind?

Posted on 2007-04-10
6
327 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
  • 3
  • 3
6 Comments
 
LVL 3

Expert Comment

by:dmagliola
Comment Utility
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
Comment Utility
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
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 8

Author Comment

by:ApexCo
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
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…
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.

762 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

11 Experts available now in Live!

Get 1:1 Help Now