How can I create hotspots?

File a bug report about that please.

Until now my posts where ignored, but I still worked on the picture map I proposed above.

The attached project uses the principle of two pictures of same dimensions :

  • The picture displayed in the ImageView
  • The picture that is used as map, and where hotspots are made of solid colors. Here, I simply modified the displayed pictures by painting shapes

This project behaves like an HTML Image Map. When the mouse hovers over a shape :

  • Cursor changes to hand pointer
  • Tooltip displays the corresponding text

When clicked, the hotspot displays a msgbox as example.

Nathan Wright, hope this will have the honor of your kind attention. It is a proof of concept that can be optimized, and for instance a timer could be used to save some back and forth traffic in the MouseMove event. It may not be as cunning as you had wished, but it works.

The other advantage of the color picture map is that it is possible to have very complex shapes, would it be a bunny rabbit or the map of the United Kingdom.

Download the zipped project here.

PS : Using the HTML image map is possible too, but it would require parsing the content of it and use that to draw shapes onto a picture that would be used the same way. It was quicker to draw solid color shapes in Photoshop.

Yet another example of project that works. That is, if you care to look at it…

This one uses the HTML image map and the session.HashTagChanged to respond to user click.

This project is a great deal faster than the Xojo method, as the job is done by the browser, which sends only the hash tag upon click.

It is not as flexible, though, as placement of the HTML code has to be made from html, and position of the picture is not as precise.

Do you like cunning ?

Here you have two working projects, after only 4 weeks of asking for a solution. Ignoring posts that can help is not nice. :confused:

Hi Michel, sorry for not replying to your comments sooner. For some reason I dont always get notifications from the Xojo forum and missed your posts. :frowning:

Both your suggestions work really well and I am now going to have to think of the best method to use for my project. Out of interest, are you using a Mac as I am using a Windows PC and the RGB colour checking does not appear to be exactly the same so I think I will probably use the cunning example.

Thanks everyone for help with this, just goes to show their are many ways to do things with Xojo.

I used a Mac to create the hot project. Running it on the PC showed some issues :

  • Windows proportions between colors are different
  • Hovering over a given color, detection is not stable. In my example, yellow show blue oscillating between 0 and 1

It would be possible to get a good result with some workarounds like testing for multiple possibilities, but this could be a hassle. And as the program will ultimately execute on a Linux machine, it is yet another story that would most probably require adjustments. It shows that cross platform has its limits.

My personal preference goes with using the image map as HTML. By editing the source in Kompozer I was able to position the image fairly precisely around Xojo controls. I like the possibility to use the browser resources and simply react to the htag.

And for you, it can be nice to reuse your imagemap :slight_smile:

Michel, I learn so much from the Xojo forum each day and looking at things in different ways to come up with solutions. I dont think I have yet had a day (since using Xojo) where I havent looked at the forum and thought “I didnt know you could do that!”. I am hoping to get to some of the conferences in Europe later this year and the US next year as it would be really good to meet up with the people on the forum and the Xojo team.

Sharing is the best way to keep what we have learned :slight_smile:

[quote=81775:@Michel Bujardet]I used a Mac to create the hot project. Running it on the PC showed some issues :

Windows proportions between colors are different
Hovering over a given color, detection is not stable. In my example, yellow show blue oscillating between 0 and 1[/quote]

I have reworked the map picture and used primary colors for the shapes. Still, the results are different between Mac and Windows. The oscillating results on Windows are gone, though, the whole shape gives the same color proportions.

Guys, this is a good idea which may be better served using an html map tag. One of you should file a feature request because this would allow us to do this completely browser side.

That is what I did in the “cunning” project using a source control to send the HTML image map to the browser. Could be nice to have a better way to place the HTML than before the page, though.

But I do not quite understand what kind of feature should be requested. What do you mean ?

How about adding hotspot maps directly to a WebImageView? Off the top of my head, you would pass an array of hotspots and they would trigger an event of some kind.

The image map is not a simple image document or a URL. It is in effect an HTML page. So it would mean in a way making the WebImageView sort of an HTML container. Or maybe that would require a new control ?

Regular HTML image maps contain URLs for the browser to click and go to, therefore leaving the Xojo app . So it would be necessary to have an event like CancelLoad in the desktop HTMLViewer to intercept clicks. Although what I did with session.HashTagChanged already works quite well.

I just looked at the spec, and we can attach mouse events to them, including onClick, so there’s no reason we should be prevented from doing what you need.

33278 - Add Image Map to WebImageView

Hey guys, sorry for the late response to this post but yet again the forum has decided not to notify me of any of your posts even though it was me that create the topic (weird).

This is great news that it has been logged as a feature request. Their are many tools around that you can use to create HTML image maps and if it was possible to be able to copy and paste the info from this into Xojo that would be great. Obviously the holy grail would be the ability in Xojo to be able to click in multiple locations to create the hotspot data but I am sure that once the ability to create the hotspot is available then some in the community will create a simple hotspot editor plugin that could be used to make the process even easier (a bit beyond my skills).