Stages Documentation

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
72:clickable_image [2020/09/09 17:34] – aakr72:clickable_image [2020/09/09 17:48] – aakr
Line 1: Line 1:
-===== Precondition: A tool/website to create image maps is required =====+====== Adding Clickable Images in Description ======
  
-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. +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.
-===== Steps to copy target link you want to apply to your image map =====+
  
-Steps to copy the target link in //Stages//+**1. Select image map tool**
  
-{{https://doc.stagesasaservice.com/lib/plugins/ckgedit/fckeditor/userfiles/image/72/chainlink_1.png?nolink&720x147}}+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.
  
-  * Open the editor +**2. Copy target link you want to apply to your image map**
-  * 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}}+Open the editor and click on the Chain-icon
  
-===== Now switch to your preferred image map tool/website =====+[[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. 
 + 
 +{{  :72:screen2.png?direct&500x493  }} 
 + 
 +**3. 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. //Optionally you can assign a title. You can distribute additional areas if you want your image to have more parts to click on.
Line 26: Line 27:
   * Please copy only the //<area…>//  tags   * Please copy only the //<area…>//  tags
  
-//{{:72:upload_image_map.png?nolink&1134x892}}{{:72:image_map_copy.png?nolink&592x353}}//+//[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:upload_image_map.png|{{  :72:upload_image_map.png?direct&800x629  }}]]{{  :72:image_map_copy.png?direct&600x358  }}//
  
-===== Head back to Stages =====+**4. Head back to Stages**
  
-  * Upload your image to //Stages// +  * Upload your image to Stages 
-  * Double Click on the image and paste the copied link into the //Image Map//  fiel//d// +  * Double-click on the image and paste the copied link into the //Image Map//  fiel//d// 
-  * manually delete the// target=""//section+  * Manually delete the// target=""//
   * Click on //Save//   * Click on //Save//
  
 Your clickable image is ready to use Your clickable image is ready to use
  
-{{:72:delete_target_field.png?nolink&599x552}}+[[https://doc.stagesasaservice.com/lib/exe/fetch.php?media=72:delete_target_field.png|{{  :72:delete_target_field.png?direct&600x553  }}]]