How would I turn one image into an entire set of buttons?

Question

In my case I have a map of the office I'm in now, I'd like to make it to where when I click on each different room the appropriate event (routine, etc.) happens. I imagine it's possible but I've only ever seen (here and elsewhere) turning an image into a button, or using a button with an image as the background. But never have I seen of turning areas of a single image into multiple click-able objects. I know HTML had a thing where you tag specific pixel ranges using (x, y) start and (x, y) end to make a smaller portion of the image work as a button but I can't remember anything like that for visual basic or .Net.

Please don't prefix your titles with "Visual Basic 2010 - " and such. That's what tags are for. — John Saunders, Feb 07 '12 at 00:28
Native is the plan, also sorry John I'll do better next time. — J. Russell, Feb 07 '12 at 17:22

score 2 · Accepted Answer · edited May 23 '17 at 10:34

Have a look on this article on this site: How to realize with WinForms in C# something like an image with map areas in a homepage (at hoovering cover areas with semi transparent rectangle)?

and also this: VBNet Image Map

Some Code snippet:

Public Sub New()

    Dim pts As New List(Of PointF)()

    pts.Add(New PointF(70, 160))
    pts.Add(New PointF(215, 244))
    pts.Add(New PointF(242, 217))
    pts.Add(New PointF(159, 71))
    pts.Add(New PointF(70, 160))

    Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), "P=RI^2"))

    '//create next polygon
    pts = New List(Of PointF)()
    pts.Add(New PointF(X, Y))
    pts.Add(New PointF(X2, Y2))
    '//etc...
    pts.Add(New PointF(X, Y))
    Me.formulas.Add(New Formula(New PolygonF(pts.ToArray()), _
                                             "Formula XYZ"))

    Me.InitializeComponent()

    Me.PictureBox1.Image = My.Resources.OhmsLawWheel

End Sub

This really looks like exactly what I need. (I've already downloaded the example program from the forum.) Thanks a ton everyone. (can't up vote yet *shrugs*) — J. Russell, Feb 07 '12 at 17:32

score 1 · Answer 2 · answered Feb 07 '12 at 00:29

The "thing where you tag specific pixel ranges" is called an Image Map and there is a .Net class for that.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.imagemap.aspx#Y0

The examples and related topic on the MSDN page can probably guide you.

This is for a web app, though. Is it ok with you?

score 0 · Answer 3 · answered Feb 07 '12 at 00:33

If you are creating a web app check out Image Maps. If you are creating a native app you may need to be more created. If you have a vector based image you might be able to use it with WPF to create a simple interface. If not you will either need to put buttons in each "room" or write your own code for bounds checking.

How would I turn one image into an entire set of buttons?

3 Answers3