Spas 0

Hi all,

I am creating an educational website for printers. I want to include a workflow of the general print process which will be a set of images connected with arrows and the user should be able to click on a particular image to go into detail of the depicted process (will open a new page).

Checkout the attached image for how it is supposed to look. (text is in cyrillic)

I have used Adobe Illustrator to create it and export to html + images with save for web. Trouble is it is exported as html table and when I paste the code in my website it breaks down. I guess the problem is the CSS used by my CMS (which is Wordpress). I can go manually and fixed that but it is a lengthy process and I will have to create ~20 workflows.

My question is, can you suggest another way of creating the workflow?

  • another application/software
  • another technique

Ideally a specific application/framework for creating workflows.

Thank you!,



  • Click on resources to the right to see the image of the workflow. Spas over 7 years ago

1 answer

This was chosen as the best answer

Hi Spas,

The simplest way to do this is using an image map:

<img alt="?? ???? ?? ???????? ????????" src="" usemap="#process-1">
<map name="process-1">
    <area shape="rect" alt="???????? ??????" title="???????? ??????" coords="133,45,250,115" href="#graphitsyen">
    <area shape="rect" alt="??????????? ??????????" title="??????????? ??????????" coords="133,138,249,208" href="#pryedpyetsatna">
    <area shape="rect" alt="?????" title="?????" coords="133,230,250,300" href="#pyetsat">
    <area shape="rect" alt="???????????? ???????" title="???????????? ???????" coords="133,320,250,390" href="#dovrshityelni">

The end result.

Here's an online tool to make image maps that might help you to streamline the process.

Answered over 7 years ago by Jordan Gray