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] – [2. Calculate the Relative Positions and Width/Height] 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 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: | ||
| </ | </ | ||
| - | 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.1595540941.txt.gz · Last modified: 2021/08/24 17:34 (external edit)