Image with circles with popup box in HTML

[Slang75]

Hi all,

I have an image of a country map I created in illustrator, my question is this, on the map, are 10 circles that I need at least hyperlinks (when the image is online, they are active, clickable links to other webpages, but still look like circles) and even better as a popup box so when a user clicks any round circle a popup box opens with some text and links. This final image would be saved as a jpeg and hosted online, with the clickable sections.

Is this at all possible from with illustrator?

Thanks!

[Monika Gause]

Save your JPEG.

And then create an image map in your favourite HTML editor. HTML map tag

[kdmemory · Accepted solution]

Hi Slang75

To answer your question, if that all is possible in Illustrator, the answer is No. As far as I know. Illustrator is no web development tool.

You could go the Image Map way as Monika suggests. But then you only have the links with no popups and other bells and whistles. I see right now two ways, though both demand some trickery outside Illustrator.

Suggestion 1

You save your pure map from Illustrator without the circles, but make some notes on the x and y positions where the circles belong in relation to the coordinates of your map. Then you use some CSS positioning techniques (divisions with z-index, position relative/absolute, left and top values) to float your circles in controlled positions above your map. Then with some Javascript and CSS you make that when the circles are clicked and/or mouseovered that your popups with text and images appear. In one way or the other. I can't go too much into detail right now, you first would have to decide the general approach.

Suggestion 2

You make yourself familiar with Adobe Animate CC. If you have a Creative Cloud Subscription install it. Here you can have your map as background on a stage and place your circles and hidden (at first) popups in a illustration-friendly manner (very much like Illustrator). You would publish the result in HTML5 Canvas format which would make it accessible on desktop and mobile touch devices alike. To animate how your circles and popups behave and appear you can be playful after your heart's content. This method would also have the advantage of being easily responsive for different viewport sizes. The insertion of the final canvas into your webpage would be done inside an iFrame.

Okay, both my suggestions are a bit tricky but it would be worth it. The Image Map is the quicker solution for sure.

Klaus

[mjbelt]

Another option is to use Adobe Dreamweaver which will produce all code.

How to include interactive hotspots in your web site