Solved

Defining a clickable region in code behind?

Posted on 2007-04-10
6
328 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
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
This is used to tweak the memory usage for your computer, it is used for servers more so than workstations but just be careful editing registry settings as it may cause irreversible results. I hold no responsibility for anything you do to the regist…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

867 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

20 Experts available now in Live!

Get 1:1 Help Now