HSRW EOLab Students Wiki

User Tools

Site Tools

Trace:
amc2020:group_n:tutorial

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
amc2020:group_n:tutorial [2020/07/23 23:48] – jonas001amc2020:group_n:tutorial [2023/01/05 14:38] (current) – external edit 127.0.0.1
Line 12: Line 12:
 In the method used here, the shapes of the clickable areas containing the links (called hot-spots)  are rectangles. So in the example, there will be a clickable rectangle-shaped area for the palm tree, one for the sunset and one for the sea. If you have chosen your picture, you need to get the following things: In the method used here, the shapes of the clickable areas containing the links (called hot-spots)  are rectangles. So in the example, there will be a clickable rectangle-shaped area for the palm tree, one for the sunset and one for the sea. If you have chosen your picture, you need to get the following things:
   * X and Y Position (in pixels) of the top left corners of your rectangles   * X and Y Position (in pixels) of the top left corners of your rectangles
-  * Width and Height of the ractangle in pixels+  * Width and Height of the rectangles in pixels
   * Width and Height of the complete image in pixels   * Width and Height of the complete image in pixels
  
Line 34: Line 34:
 The relative width can be calculated like this: The relative width can be calculated like this:
  
-$Width_{relative}=\frac{Width_{hot-spot,pixels}}{Width_{image, pixels}}*100$+$Width_{relative}=\frac{Width_{rectangle,pixels}}{Width_{image, pixels}}*100$
  
 For the relative heights, just exchange the absolute widths with the absolute heights. For the relative heights, just exchange the absolute widths with the absolute heights.
Line 45: Line 45:
 ===== 3. Collect your links ===== ===== 3. Collect your links =====
  
-When you got the relative values done, you need to get the URLs of the webpages you want to link to, for example: https://www.google.de/+When you got the relative values done, you need to get the URLs of the web-pages you want to link to, for example: https://www.google.de/
 \\ \\
-Collect those for all the hot-spots and maybe add them to the table for better overview.+Collect those for all the hot-spots and maybe add them to the table for a better overview.
  
 Afterwards you need to upload your image to dokuwiki and get the image link. You can get it when you click in the dokuwiki media files onto the magnifying glass which opens a new tab with the image in full resolution. You need to copy the URL from the tab and save it for later. Afterwards you need to upload your image to dokuwiki and get the image link. You can get it when you click in the dokuwiki media files onto the magnifying glass which opens a new tab with the image in full resolution. You need to copy the URL from the tab and save it for later.
Line 68: Line 68:
 </code> </code>
  
-In the opening tag we indicate that the position should be relative. The implementation of the image and the links will be placed between the <div > and the </div > tag. To implement the image, we need the following code:+In the opening tag we indicate that the position should be relative. The implementation of the image and the links will be placed between the <d iv> and the </d iv> tag. To implement the image, we need the following code:
 <code> <code>
 <img src="URL" style="width: 100%; height: auto;"> <img src="URL" style="width: 100%; height: auto;">
Line 79: Line 79:
 height: 11.8%; background-color: rgba(0,0,0, 0.25);"></div></a> height: 11.8%; background-color: rgba(0,0,0, 0.25);"></div></a>
 </code> </code>
-The <a > tag creates a link which is defined with href. You need to replace the "LINK" with the URL you want to link to. The <div > tags inside the <a > tags contain the rectangle which can be clicked. Here you need to replace the percentages by your own relative positions:+The <a > tag creates a link which is defined with href. You need to replace the "LINK" with the URL you want to link to. The <d iv> tags inside the <a > tags contain the rectangles which can be clicked. Here you need to replace the percentages by your own relative positions:
   * left: relative position of X   * left: relative position of X
   * top: relative position of Y   * top: relative position of Y
Line 122: Line 122:
 </html> </html>
  
-In the image you can also see the ligthly shaded black rectangles where the hot-spots are. If you remove the background color or set the 0.25 to 0.0, they will disappear and the result looks like this:+In the image you can also see the lightly shaded black rectangles where the hot-spots are. If you remove the background color or set the 0.25 to 0.0, they will disappear and the result looks like this:
  
 <html> <html>
Line 138: Line 138:
 </html> </html>
  
-Test it out yourself and click on the hotspots to check out if the links are working.+Test it out yourself and click on the hot-spots to check out if the links are working.
  
-Have fun with this cool feature and try it out in your own projects!+Have fun with this cool feature and try it out in your own projects if you like!
amc2020/group_n/tutorial.1595540895.txt.gz · Last modified: 2023/01/05 14:38 (external edit)