Differences

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

--- amc2020:group_n:tutorial [2020/07/23 23:49] – [3. Collect your links] jonas001
+++ amc2020: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:
   * 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
@@ Line 45: / Line 45: @@
 ===== 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 a better overview.
@@ Line 68: / Line 68: @@
 </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>
 <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>
 </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
   * top: relative position of Y
@@ Line 122: / Line 122: @@
 </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>
@@ Line 138: / Line 138: @@
 </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!