| |
72:clickable_image [2020/04/17 00:48] – [2. How to copy the target link you want to apply to your image map] aakr | 72:clickable_image [2024/02/15 00:00] (current) – external edit 127.0.0.1 |
---|
| ====== Adding Clickable Images in Description ====== |
| |
===== 1. Precondition: A tool/website to create image maps is required ===== | 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: |
| |
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. | - 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 |
| |
| |
===== 2. How to copy the target link you want to apply to your image map ===== | ===== Create a Clickable Image ===== |
| |
Steps to copy the target link in //Stages// | **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/72/chainlink_1.png?nolink&720x147}} | {{ https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/73/imageupload.png?nolink&1000x501 }} |
| |
* Open the editor | **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. |
* Click on the Chain-icon | |
* Navigate to the element which you want to link with your clickable area | |
* Copy the link into the clipboard | |
* Cl//ose //the window | |
| |
{{:72:screen2.png?nolink&600x592}} | 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 }} |
| |
===== 3. Now switch to your preferred image map tool/website ===== | |
| |
In this example we explain the procedure using //image-map.net// | ===== Generate Image Map Information ===== |
| |
* Open the domain and choose a picture from your PC or load a picture from a website into the generator | 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. |
* After you see your image, choose the shape for the clickable area and mark it in your image | === Steps to generate Stages links === |
* 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 | |
| |
//{{:72:upload_image_map.png?nolink&1134x892}}{{:72:image_map_copy.png?nolink&592x353}}// | 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 |
| |
===== 4. Head back 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 }}]] |
| |
* Upload your image to //Stages// | * 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. |
* Double Click on the image and paste the copied link into the //Image Map// fiel//d// | |
* manually delete the// target=""//section | |
* Click on //Save// | |
| |
Your clickable image is ready to use | [[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:screen2.png|{{ :72:screen2.png?direct&500x493 }}]] |
| |
{{:72:delete_target_field.png?nolink&599x552}} | === Steps to work in 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// |
| |
| - 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 }}]] |
| |
| This** cleaned-up image map output** is now ready to be pasted in the image map section in Stages. |
| |
| |