Stages Documentation

Differences

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

Link to this comparison view

72:clickable_image [2022/04/07 12:15] – [Create a Clickable Image] iolr72:clickable_image [2024/02/15 00:00] (current) – external edit 127.0.0.1
Line 22: Line 22:
 ===== 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 to use in the clickable image.+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 38: 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 55: Line 54:
 === Clean up the image map output === === Clean up the image map output ===
  
-Before pasting the image map output in the image map, it requires some clean-up. Copy the output in a clipboard and follow the steps below:+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 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.