| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| 72:clickable_image [2021/03/01 10:05] – pklr | 72:clickable_image [2022/01/04 05:39] – aakr |
|---|
| ====== 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 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: |
| |
| **1. Select image map tool** | - upload the image in a description box of desired location |
| | - update 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. | ===== Create a clickable image ===== |
| |
| **2. Copy target link you want to apply to your image map** | **1. Upload the image in a description box of desired location. **Click on the insert image icon and upload the image you want add clickable links to. |
| |
| Open the editor and click on the Chain-icon | {{ 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. |
| | |
| | Retreiving information to be pasted in this image map involves a few steps which have been described in next section. |
| | |
| | {{ https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imagemapupdate.png?nolink&1000x685 }} |
| | |
| | ===== 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. |
| | |
| | === 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. |
| | |
| | * Open the editor/description box and click on the chain-link icon |
| |
| [[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/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 }}]] |
| |
| Navigate to the element which you want to link with your clickable area. Copy the link into the clipboard. | * 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. |
| |
| [[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:screen2.png|{{ :72:screen2.png?direct&500x493 }}]] | [[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:screen2.png|{{ :72:screen2.png?direct&500x493 }}]] |
| |
| **3. Switch to your preferred 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 |
| |
| 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 choose a picture from your PC or load a picture 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 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. | - Use the link you saved in the previous step of //Stages. // |
| * Click on //Show Me The Code!// | - Optionally you can assign a title. You can distribute additional areas if you want your image to have more parts to click on. |
| * Please copy only the //<area…>// tags | - 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 }}]]// | {{ 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 }}]]// | //[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:image_map_copy.png|{{ :72:image_map_copy.png?direct&600x358 }}]]// |
| |
| **4. Switch back to Stages** | === 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: |
| |
| * Upload your image to Stages | |
| * Double-click on the image and paste the copied link into the Image Map field | |
| * Manually delete the target=“” | * Manually delete the 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**]]" |
| * Click on Save Your clickable image is ready to use.[[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** clean up image map output** is now ready to be pasted in the image map box in high level step 2 mentioned at the beginning. |
| |
| |