User Tools

Site Tools


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
Last revisionBoth sides next revision
amc2020:group_n:tutorial [2020/07/23 23:56] jonas001amc2020:group_n:tutorial [2020/07/24 00:11] jonas001
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 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 a better overview. Collect those for all the hot-spots and maybe add them to the table for a better overview.
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.txt · Last modified: 2021/08/24 17:35 by 127.0.0.1