I have an image that I need to be able to add hotspots to so that when the user clicks on the hotspot an even occurs. I have looked through the Xojo docs and the forum but cannot find any mention of hotspots. If it is not possible to do hotspot detection I was thinking about using multiple PNG files which in effect would be the hotspots but I would somehow need to ignore the transparent part of the PNG as the hotspot areas are irregular shapes.
Nathan
The WebImageView.MouseDown event passes X and Y coords of the click. That event is on the server side, so if you keep the picture around on the server, you could check its alpha channel component at that coordinate.
Do difficult / how much would it cost to get you to tweak your module so that on the mouse up event it also returned a “isAlpha” parameter which would tell if the mouse was over the Alpha Channel when the mouse went up?
It’s an interesting request. Based on WebImageView (the Xojo class) or WEScaledImage? Either way, you’ll need the original image in your Xojo project, or loaded from server file system at runtime. This would not do well with an image served up by another server.
They will all be images that are part of the project. I am thinking of the WebImageView.
Also would it be possible to have a value returned that told you the name of the image you were over when the even happened. This way you could make sure when you have overlapping images that you are on the correct one.
I’ll drop you an email Friday my time, Nathan.
Hi Brad, never seemed to get your email. Did you make any progress with this? I am really desperate for a way to be able to have hotspots in an image. Thanks
All you need to do is create and store the RGBSurface for the picture. You want to store it once rather then get it each time because…if I remember correctly…that’s an expensive operation. In your MouseUp event…
dim intAlpha As integer = myRgbSurface.Pixel(x,y).Alpha
if intAlpha = 255 then msgbox("It's transparent!")
You could exclude semi-transparent pixels by testing for values lower then 255. 0 is opaque.
It is not as elaborate as what is possible in HTML, but you can lay over the image a label with no text which is transparent, and set the pointer as well as the help text for that zone. And place navigation in the label KeyDown event. By using series of labels you can to delimit hot spots, although the shape will not be as precise as a geometric figure.
Another approach which could work is to prepare a picture the same size as your image, where hotspot shapes are drawn in solid colors : red, blue, yellow, green, and so on. By comparing the position of the mouse over the image to the color of a pixel in the hotspot picture, the program can react according to that color. It will be highly traffic intensive, though, as MouseMove over the image is necessary. I did not have time to experiment.
Hi Daniel, I did try this before but got a bit confused as I could not work out how I create the RGBsurface from a WebImageView?
The checking needs to be accurate but only on the mouse up event. In the image below you will see a circle with a man in it. Each of the colours and the white ring around the edge needs to be a hotspot that does different things when the mouse is clicked. The actual image will be 500x500px and I have the images as a vector so my idea was to have a different image for each colour part and then use Daniels suggestion (when I can get it working) to check for the alpha part and in each image have a mouse up event that does the check for alpha and if not then I know they have clicked on the associated colour part.
Sorry Daniel I am being really stupid because I just cant see how I access the RGBsurface part of the ImageWell. I have tried using the picture within the image well but then it does not give me the option of RGBsurface.
dim mypic as Picture = shuttle
dim MyRGBSurface as RGBSurface = mypic.RGBSurface
shuttle is the picture I use in the imagewell
WebImageView.Picture is a WebPicture. You need to cast to an actual Picture.
dim p as Picture = myImageWell.Picture 'Xojo has built in conversion for WebPicture/Picture.
dim s as RGBSurface = p.RGBSurfaceNathan - is this something where you would use an HTML image map if you could?
If already have an HTML image map from the previous version of the software. Just need a way to pass the image map details back to Xojo, do you have a cunning plan???
I have tried the following code in the image wells mouse up event as a test but when I click on areas it does not return the correct RGB values and most of the time returns 0 for red, green and blue when it is not.
[code] dim mypic as Picture = me.Picture
dim MyRGBSurface as RGBSurface = mypic.RGBSurface
dim intRed As integer = MyRGBSurface.Pixel(x,y).Red
dim intGreen As integer = MyRGBSurface.Pixel(x,y).Green
dim intBlue As integer = MyRGBSurface.Pixel(x,y).Blue
dim intAlpha As integer = MyRGBSurface.Pixel(x,y).Alpha
if intAlpha = 255 then
msgbox “Alpha”
else
msgbox "Red: " + cstr(intRed) + " Green: " + cstr(intGreen) + " Blue: " + cstr(intBlue)
end if[/code]
Ok worked out why I was getting odd results. It appears that Xojo’s X and Y on the mouse up event go nuts if you lock the image well to the left and right. All of the coordinates seem to go out of sync.