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:38] – 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) | 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 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, | + | $Width_{relative}=\frac{Width_{rectangle, |
| 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 | + | 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 | ||
| * width: relative width of the hot-spot | * width: relative width of the hot-spot | ||
| * height: relative height of the hot-spot | * height: relative height of the hot-spot | ||
| - | You can give the relative position also with some decimal places to be more accurate.// | + | You can give the relative position also with some decimal places to be more accurate. |
| + | \\ | ||
| The last term (background-color: | The last term (background-color: | ||
| Line 95: | Line 96: | ||
| <img src=" | <img src=" | ||
| | | ||
| - | <a href=" | + | <a href=" |
| | | ||
| - | <a href=" | + | <a href=" |
| | | ||
| - | <a href=" | + | <a href=" |
| | | ||
| </ | </ | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | If the complete code is just pasted into the dokuwiki, the result looks like this: | ||
| < | < | ||
| Line 110: | Line 113: | ||
| <img src=" | <img src=" | ||
| | | ||
| - | <a href=" | + | <a href=" |
| | | ||
| - | <a href=" | + | <a href=" |
| | | ||
| - | <a href=" | + | <a href=" |
| | | ||
| </ | </ | ||
| </ | </ | ||
| + | |||
| + | 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: | ||
| + | |||
| + | < | ||
| + | <div style=" | ||
| + | | ||
| + | <img src=" | ||
| + | | ||
| + | <a href=" | ||
| + | | ||
| + | <a href=" | ||
| + | | ||
| + | <a href=" | ||
| + | | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | 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 if you like! | ||
amc2020/group_n/tutorial.1595540310.txt.gz · Last modified: 2023/01/05 14:38 (external edit)