Stages Documentation

Differences

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

Link to this comparison view

72:clickable_image [2021/03/01 09:42] – pklr72: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 user to another location in Stages or even a weblink.+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:
  
-**1. Select image map tool**+   - 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
  
-A tool/website is required to create image maps. 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. 
  
-**2. Copy target link you want to apply to your image map**+===== Create a Clickable Image =====
  
-Open the editor and click on the Chain-icon+**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/exe/fetch.php?tok=dc355c&media=https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/72/chainlink_1.png|{{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/72/chainlink_1.png?direct&720x147  }}]]+{{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imageupload.png?nolink&1000x501  }}
  
-Navigate to the element which you want to link with your clickable area. Copy the link into the clipboard.+**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.
  
-[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:screen2.png|{{  :72:screen2.png?direct&500x493  }}]]+Retrieving link information to be pasted in this image map involves a few steps which have been described in the next section.
  
-**3. Switch to your preferred image map tool/website**+{{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imagemapupdate.png?nolink&1000x685  }}
  
-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 +===== Generate Image Map Information =====
-  * After you see your image, choose the shape for the clickable area and mark it in your image +
-  * 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. +
-  * Click on //Show Me The Code!// +
-  * Please copy only the //<area…>//  tags+
  
-//[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:upload_image_map.png|{{  :72:upload_image_map.png?direct&800x629  }}]]//+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 ===
  
-//[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:image_map_copy.png|{{  :72:image_map_copy.png?direct&600x358  }}]]//+First, generate in Stages a list of all the links that you want to use in the clickable image.
  
-**4. Switch back to Stages**+  * Open the editor/description box and click on the chain-link icon
  
-  * Upload your image to Stages +[[https://doc.stagesasaservice.com/lib/exe/fetch.php?tok=dc355c&media=https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/72/chainlink_1.png|{{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/72/chainlink_1.png?direct&720x147  }}]]
-  * Double-click on the image and paste the copied link into the //Image Map//  fiel//d// +
-  * Manually delete the// target=""// +
-  * Make sure** \, [**,**] **characters** **are escaped correctly inside the link e.g. +
-      *<code>+
  
-href=" [[www.testurl.com/y=123**[abc]**def|]] +  * Next, navigate to the element which you want to link with your clickable area. Copy the link into the clipboard. Repeat this step with all the links and save them in a clipboard. **Note: **Do not click on insert. Just copy on a clipboard/notepad.
- --> ​​href="[[www.testurl.com/y=123**\[abc\]**def|]]+
  
-</code> +[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:screen2.png|{{  :72:screen2.png?direct&500x493  }}]]
-      *<code>+
  
-href="[[[Role]**ProjectManager\3**|]]" --> href="[[[Role]**ProjectManager\\3**|]]"+=== Steps to work in Image map tool/website ===
  
-</code> +With the list of links, switch to your preferred image map tool.
-  * Click on //Save//+
  
-Your clickable image is ready to use.+In this example, we explain the procedure using //image-map.net// 
 + 
 +  - Open the domain and select an image file from your PC or load an image from a website into the generator 
 +  - 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. // 
 +  - Optionally you can assign a title. You can distribute additional areas if you want your image to have more parts to click on. 
 +  - Click on //Show Me The Code!// 
 +  - Please copy only the //<area…>//  tags 
 + 
 +{{  https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/general/imageupdateallsteps.png?nolink&1000x525  }} 
 + 
 +//[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:image_map_copy.png|{{  :72:image_map_copy.png?direct&600x358  }}]]// 
 + 
 +=== Clean up the image map output === 
 + 
 +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 string **target=“”** 
 +  * 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=“[‌[‌[Role]**ProjectManager\3**]]” –→ href=“[‌[‌[Role]**ProjectManager\\3**]]"
  
 [[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:delete_target_field.png|{{  :72:delete_target_field.png?direct&600x553  }}]] [[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.