Differences
This shows you the differences between two versions of the page.
72:clickable_image [2022/01/04 05:44] – aakr | 72: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 [[: | + | Clickable images are typically needed in [[: |
+ | |||
+ | - uploading the image in an editor/ | ||
+ | - updating the image map by double-clicking on the image and copy-pasting the map information in this box | ||
- | - uploading the image in a description box of desired location | ||
- | - updating the image map by double-clicking on the image and copy-pasting the map information in this box. | ||
===== Create a Clickable Image ===== | ===== Create a Clickable Image ===== | ||
- | **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. | + | **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:// | {{ https:// | ||
- | **2. Update the image map by double-clicking on the image and copy-pasting the map information in this box**. | + | **2. Update the image map by double-clicking on the image and copy-pasting the map information in this box**. |
- | Retreiving | + | Retrieving link information to be pasted in this image map involves a few steps which have been described in the next section. |
{{ https:// | {{ https:// | ||
- | ===== Generate Image Map Information ===== | ||
- | A tool/ | + | ===== Generate Image Map Information ===== |
+ | 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 === | === Steps to generate Stages links === | ||
- | Firstly, stay in Stages | + | First, generate |
* Open the editor/ | * Open the editor/ | ||
Line 36: | Line 37: | ||
=== Steps to work in Image map tool/ | === Steps to work in Image map tool/ | ||
- | 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 // | + | In this example, we explain the procedure using // |
- | - Open the domain and choose a picture | + | - 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 53: | Line 54: | ||
=== Clean up the image map output === | === 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: | + | 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=“” | + | * Manually delete the string **target=“”** |
* Make sure **\, [, | * Make sure **\, [, | ||
* href=“[[www.testurl.com/ | * href=“[[www.testurl.com/ | ||
Line 62: | Line 63: | ||
[[https:// | [[https:// | ||
- | This** cleaned up image map output** | + | This** cleaned-up image map output** |