ImageMap()

[Rook Zimbabwe]

I think a nice feature would be the ability to IMAGEMAP like in HTML... That way the programmer could define areas of the IMAGE on his window that are clickable and do things if that area is clicked!

[Fluid Byte]

Speaking as a web developer:
You should use <div>-Tag's instead of image maps. AFAIK they aren't supported by XHTML anyway.

Speaking as a PB developer:
I don't see a real advantage of this. You could use seperate image gadgets for this task. If your main reason for this is the use of an image as a button you can use a toolbar or ButtonImageGadget(). Besides, to code this yourself in PB is a piece of cake.

[AND51]

You cannot fully realize the ImageMap feature with only ImageGadget()s... How do you want to create clickable poygons and circles, etc.?

[Fluid Byte]

CreateXYZRgn_() + SetWindowRgn_() + PtInRegion_()

[freak]

Use a normal ImageGadget(), after a click event examine the WindowMouseX()/WindowMouseY() to do your action. where's the problem ?

[Fluid Byte]

Use a normal ImageGadget(), after a click event examine the WindowMouseX()/WindowMouseY() to do your action. where's the problem ?

How would you detect clicks on polygon areas?

[netmaestro]

Actually easily. But the SetWindowRgn_() and PtInRegion_() idea seems flawed in that an imagemap might have dozens of individual hotspots, each with a different event and you can only set a window to one region. -right?

[netmaestro]

OK, never mind, I don't know what I was thinking there. You don't need to have the window actually set to the region to test it - You can create several regions, all with hotspots inside a given rectangle and test WindowMouseX and Y mapped to the imagegadget against all of them. So it's a workable approach all right, it's just that dropping to the API isn't necessary, and if native commands will do the job, why not use them?

[freak]

Use a normal ImageGadget(), after a click event examine the WindowMouseX()/WindowMouseY() to do your action. where's the problem ?

How would you detect clicks on polygon areas?

With a little bit of math you can calculate this as well.

[netmaestro]

Either way you go you have to implement some sort of editor that allows the user to select hotspots for his image and number them individually. The output of such an editor would almost certainly be a copy of the image with the coldspots black and the hotspots varying shades of say, red in all shapes and sizes. In either case you'll be mapping the window mouse to the image for the final hittesting. In the case of regions, you would feed the output of the editor into a region cruncher that would read them all and create as many regions as there are different shades of red. The program would then employ PtInRegion_() and it works. Or, once the image is created from the editor, you can say "I'm done, who's got the coffee?" and in the final program, simply use Point(). Nothing to it.

[Trond]

Use a normal ImageGadget(), after a click event examine the WindowMouseX()/WindowMouseY() to do your action. where's the problem ?

This is another thing that makes Firefox so bad - it doesn't use the mouse coordinate from click message, but instead checks the coordinates when it processes the messages. So if you click somewhere, and the computer is under heavy load, Firefox will think you clicked somewhere else.

Edit: To do an image map with polygons and everything including the kitchen sink without complicated math you just make two pictures, one for display and a mask with different colours. When the users clicks on picture 2, you look up the colour of that position in the mask, and then you know what to do.

[Fluid Byte]

So to sum this up, we have 3 possible ways to acomplish this:

1.) Using Regions (bottleneck: Windows Only)
2.) Using Mouse Coordinates + Custom Collision Checking
3.) Using Color Mask / Image Mask

I will try to put together an example for all 3 of them.

[Rook Zimbabwe]

OK so my question... using the mask idea... how do you get the color under a mouseclick? What do you call?

[Fluid Byte]

OK so my question... using the mask idea... how do you get the color under a mouseclick? What do you call?

Code: Select all

; Demo Image
CreateImage(0,300,300)
StartDrawing(ImageOutput(0))
Box(10,10,80,150,#Green)
Circle(180,80,60,#Red)
Ellipse(130,220,100,40,#Yellow)
StopDrawing()

; Image Color Mask
CreateImage(1,300,300)
StartDrawing(ImageOutput(1))
Box(10,10,80,150,1)
Circle(180,80,60,2)
Ellipse(130,220,100,40,3)
StopDrawing()

OpenWindow(0,0,0,300,300,"Image Maps Demo",#PB_Window_SystemMenu | 1)
CreateGadgetList(WindowID(0))
ImageGadget(0,0,0,0,0,ImageID(0))

Repeat
	EventID = WaitWindowEvent()

	If EventID = #PB_Event_Gadget And EventGadget() = 0
		hdc = StartDrawing(ImageOutput(1))
		Select Point(WindowMouseX(0),WindowMouseY(0))
			Case 1 : Debug "GREEN BUTTON!"
			Case 2 : Debug "RED BUTTON!"
			Case 3 : Debug "YELLOW BUTTON!"
		EndSelect		
		StopDrawing()		
	EndIf
Until EventID = #PB_Event_CloseWindow