Differences
This shows you the differences between two versions of the page.
72:clickable_image [2018/12/03 09:17] – [1. Precondition: A tool/website to create image maps is required] iolr | 72:clickable_image [2024/02/15 00:00] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Adding Clickable Images in Description ====== | ||
- | ===== 1. Precondition: A tool/ | + | Clickable images are typically needed in [[:general: |
- | In this description the online | + | - uploading the image in an editor/description |
+ | - updating | ||
- | ===== 2. How to copy the target link you want to apply to your image map ===== | + | ===== Create a Clickable Image ===== |
- | Copy the target link in //Stages// | + | **1. Upload |
- | * Open the editor | + | {{ https://doc.stagesasaservice.com/lib/plugins/ |
- | * 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 | + | |
- | {{: | + | **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. |
+ | Retrieving link information to be pasted in this image map involves a few steps which have been described in the next section. | ||
- | ===== 3. Now switch to your preferred | + | {{ https://doc.stagesasaservice.com/ |
- | In this example we explain the procedure using // | ||
- | * 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. // | + | |
- | * Click on //Show Me The Code!// | + | |
- | * Please copy only the //< | + | |
- | //{{:72: | + | A desktop / online tool is required to generate the image map information. For this documentation the online image map generator |
+ | === Steps to generate Stages links === | ||
+ | First, generate in Stages a list of all the links that you want to use in the clickable image. | ||
- | ===== 4. Head back to Stages ===== | + | * Open the editor/ |
- | * Upload your image to //Stages// | + | [[https://doc.stagesasaservice.com/lib/exe/fetch.php? |
- | * Double Click on the image and paste the copied link into the //Image Map// fiel//d// | + | |
- | * manually delete the// target="" | + | |
- | * Click on //Save// | + | |
- | Your clickable image is ready to use | + | * Next, navigate |
- | {{:72:delete_target_field.png? | + | [[https:// |
+ | |||
+ | === Steps to work in Image map tool/ | ||
+ | |||
+ | With the list of links, switch to your preferred image map tool. | ||
+ | |||
+ | In this example, we explain the procedure using // | ||
+ | |||
+ | - 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 //< | ||
+ | |||
+ | {{ https:// | ||
+ | |||
+ | // | ||
+ | |||
+ | === 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 **\, [, | ||
+ | * href=“[[www.testurl.com/ | ||
+ | * href=“[[[Role]**ProjectManager\3**]]” –→ href=“[[[Role]**ProjectManager\\3**]]" | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | This** cleaned-up image map output** | ||