Stages Documentation

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

72:clickable_image [2022/01/04 19:40] – aakr72:clickable_image [2024/02/15 00:00] (current) – external edit 127.0.0.1
Line 1: Line 1:
 ====== Adding Clickable Images in Description ====== ====== Adding Clickable Images in Description ======
  
-Clickable images are typically needed in [[:general:landingpage|landing pages]] or when you want to provide a visual map which can be clicked to take the user to a specific process element (like ''workflow'', ''activity'', ''guidance'', etc.) in Stages or even an external weblink. Creating a clickable image involves two high level steps:+Clickable images are typically needed in [[:general:landingpage|landing pages]] or when you want to provide a visual process map that can be clicked to take the user to a specific process element (like ''workflow'', ''activity'', ''guidance'', etc.) in Stages or even an external weblink. Creating a clickable image involves two high-level steps:
  
-   - uploading the image in a editor/description box of desired location+   - uploading the image in an editor/description box of the desired location
   - updating the image map by double-clicking on the image and copy-pasting the map information in this box   - updating the image map by double-clicking on the image and copy-pasting the map information in this box
 +
  
 ===== Create a Clickable Image ===== ===== Create a Clickable Image =====
  
-**1. Upload the image in a **  **editor/description box**  **of desired location. **Click on the insert image icon and upload the image you want add clickable links to.+**1. Upload the image in an ****editor/description box** **of the desired location. **Click on the insert image icon and upload the image for which you want to add clickable links.
  
 {{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imageupload.png?nolink&1000x501  }} {{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imageupload.png?nolink&1000x501  }}
  
-**2. Update the image map by double-clicking on the image and copy-pasting the map information in this box**. It is in this step, that you specify the areas in the image where a user would click to be taken to a specific link. In this example, when a user clicks on any of the areas like 'Model', 'Visualize & Plot', etc. he/she is taken to the link specific to that area.+**2. Update the image map by double-clicking on the image and copy-pasting the map information in this box**. This step specifies the areas in the image where a user can click to be taken to a specific link.
  
-Retreiving information to be pasted in this image map involves a few steps which have been described in next section.+Retrieving link information to be pasted in this image map involves a few steps which have been described in the next section.
  
 {{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imagemapupdate.png?nolink&1000x685  }} {{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imagemapupdate.png?nolink&1000x685  }}
 +
  
 ===== Generate Image Map Information ===== ===== Generate Image Map Information =====
  
-A tool/website is required to generate image map information used in step 2 listed above. In this description the online image map generator //[[https://www.image-map.net/|image-map.net]] //is used to create the image maps//.//  You can also use your preferred solution. +A desktop / online tool is required to generate the image map information. For this documentation the online image map generator //[[https://www.image-map.net/|image-map.net]] //is used to create the image maps//.// You can also use your preferred solution.
 === Steps to generate Stages links === === Steps to generate Stages links ===
  
-Firstly, stay in Stages and generate the list of all the links that you want user to be taken to on clicking image areas handy.+First, generate in Stages a list of all the links that you want to use in the clickable image.
  
   * Open the editor/description box and click on the chain-link icon   * Open the editor/description box and click on the chain-link icon
Line 36: Line 37:
 === Steps to work in Image map tool/website === === Steps to work in Image map tool/website ===
  
-With the link information handy, switch to your preferred image map tool/website+With the list of links, switch to your preferred image map tool.
  
-In this example we explain the procedure using //image-map.net//+In this example, we explain the procedure using //image-map.net//
  
-  - Open the domain and choose a picture from your PC or load a picture from a website into the generator +  - Open the domain and select an image file from your PC or load an image from a website into the generator 
-  - After you see your image, choose the shape for the clickable area and mark it in your image+  - After the image is uploaded, choose the shape for the clickable area and mark it in your image
   - Use the link you saved in the previous step of //Stages. //   - Use the link you saved in the previous step of //Stages. //
   - Optionally you can assign a title. You can distribute additional areas if you want your image to have more parts to click on.   - Optionally you can assign a title. You can distribute additional areas if you want your image to have more parts to click on.
Line 53: Line 54:
 === Clean up the image map output === === Clean up the image map output ===
  
-Before pasting the image map output in image map, it requires some clean up. Copy the output in a clipboard and follow below steps:+Before pasting the image map output in the image map section in Stages, it requires some clean-up. Copy the output in a clipboard and perform the steps below:
  
-  * Manually delete the target=“”[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:delete_target_field.png|{{  :72:delete_target_field.png?direct&600x553  }}]]+  * Manually delete the string **target=“”**
   * Make sure **\, [,],:,#**  characters are escaped correctly inside the link e.g.   * Make sure **\, [,],:,#**  characters are escaped correctly inside the link e.g.
       * href=“[‌[www.testurl.com/y=123**[abc=#3:2]**def]]” –→ ​​“[‌[www.testurl.com/y=123**\[abc=\#3\:2\]**def]]       * href=“[‌[www.testurl.com/y=123**[abc=#3:2]**def]]” –→ ​​“[‌[www.testurl.com/y=123**\[abc=\#3\:2\]**def]]
       * href=“[‌[‌[Role]**ProjectManager\3**]]” –→ href=“[‌[‌[Role]**ProjectManager\\3**]]"       * href=“[‌[‌[Role]**ProjectManager\3**]]” –→ href=“[‌[‌[Role]**ProjectManager\\3**]]"
  
-This** cleaned up image map output**  is now ready to be pasted in the image map box in high level step 2 mentioned at the beginning.+[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:delete_target_field.png|{{  :72:delete_target_field.png?direct&600x553  }}]] 
 + 
 +This** cleaned-up image map output**  is now ready to be pasted in the image map section in Stages.