amc2020:group_n:tutorial
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| amc2020:group_n:tutorial [2020/07/23 23:49] – [3. Collect your links] jonas001 | amc2020:group_n:tutorial [2021/08/24 17:35] (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) | In the method used here, the shapes of the clickable areas containing the links (called hot-spots) | ||
| * 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 | + | * Width and Height of the rectangles |
| * 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 | + | When you got the relative values done, you need to get the URLs of the web-pages |
| \\ | \\ | ||
| 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 68: | Line 68: | ||
| </ | </ | ||
| - | 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: |
| < | < | ||
| <img src=" | <img src=" | ||
| Line 79: | Line 79: | ||
| height: 11.8%; background-color: | height: 11.8%; background-color: | ||
| </ | </ | ||
| - | The <a > tag creates a link which is defined with href. You need to replace the " | + | The <a > tag creates a link which is defined with href. You need to replace the " |
| * left: relative position of X | * left: relative position of X | ||
| * top: relative position of Y | * top: relative position of Y | ||
| Line 122: | Line 122: | ||
| </ | </ | ||
| - | In the image you can also see the ligthly | + | In the image you can also see the lightly |
| < | < | ||
| Line 138: | Line 138: | ||
| </ | </ | ||
| - | Test it out yourself and click on the hotspots | + | Test it out yourself and click on the hot-spots |
| - | 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 |
amc2020/group_n/tutorial.1595540979.txt.gz · Last modified: 2021/08/24 17:34 (external edit)