Interactive Graphic

[DR8]

Hey,

I have spent now a lot of time on researching tools to create a interactive graphic for my website and have not been successful in finding the right tool. So maybe you guys know about a good way to achieve the following:

I have the graphic in the middle below and I want to make it interactive on my website. Therefore, I would like to have appearing a helper text on the side when you hover with the curser over certain elements. In addition to that, I would like to redirect people to certain web pages when they click on one of the elements.



Is there a good tool to do this? Is there a tool where I could easily rebuild this graphic and then create the interaction? How do I integrate such a thing on my website?

Thanks for your help!

DR8

 

[liviab]

Hi, sounds like you've been on quite a hunt!

First off, two solid picks would be Adobe XD or Sketch. They're both pretty intuitive and awesome for creating interactive prototypes. You can easily import your existing graphic, add hotspot areas, and then create a link for each one that'll take your user to a different page when clicked.

Now, as for displaying helper text on hover, you'd typically need to use some HTML and CSS magic. Adobe XD or Sketch don't have built-in capabilities for this, but there's always a workaround. You can create a small pop-up inside your graphic that will appear when the user clicks or hovers over an area.

Finally, once you've got your interactive design, you're gonna need to bring it to life on your website. If you're using a CMS like WordPress, you might use a plugin to embed your design. If you're hand-coding your site, you could export your design as HTML/CSS from Sketch, or use a tool like Anima with Adobe XD to convert your design into code.

But remember, no tool is a one-size-fits-all, and what works for others might not be the best for you. So, give a couple of them a spin, and see which one suits your vibe. Hope this helps, and don't hesitate to hit us back if you have more questions. Cheers!

 

[DR8]

Hi, sounds like you've been on quite a hunt!

First off, two solid picks would be Adobe XD or Sketch. They're both pretty intuitive and awesome for creating interactive prototypes. You can easily import your existing graphic, add hotspot areas, and then create a link for each one that'll take your user to a different page when clicked.

Now, as for displaying helper text on hover, you'd typically need to use some HTML and CSS magic. Adobe XD or Sketch don't have built-in capabilities for this, but there's always a workaround. You can create a small pop-up inside your graphic that will appear when the user clicks or hovers over an area.

Finally, once you've got your interactive design, you're gonna need to bring it to life on your website. If you're using a CMS like WordPress, you might use a plugin to embed your design. If you're hand-coding your site, you could export your design as HTML/CSS from Sketch, or use a tool like Anima with Adobe XD to convert your design into code.

But remember, no tool is a one-size-fits-all, and what works for others might not be the best for you. So, give a couple of them a spin, and see which one suits your vibe. Hope this helps, and don't hesitate to hit us back if you have more questions. Cheers!

Thank you for the inspirational answer, which is very helpful. I will look into that. It is also good to know that Image mapping is not the answer to this as this technique delivers very uncool results.

DR8