Posted by Helmut_pdorf on 11 Jul 2020 12:10, last edited by Helmut_pdorf on 11 Jul 2020 12:21
Tags: area coordinate html image img link map maps
This "howto" explains how it is possible to use HTML scripting (map , area with coordinates and shapes and links , use-map on a Wikidot page.
This page is related to http://community.wikidot.com/forum/t-13505880/notice-template#post-4715463
where a map with interactive shapes an areas is asked for.
The images was taken from https://dragonage.fandom.com/wiki/Ferelden#Geography
and codings from Firefox "Inspector" …
And all the source was tested on http://community-playground.wikidot.com/map-area-test !
( with "Flemeth'S Hut" at the midle of the bottom - the page exists on the playground! )
1. Map
(html window using an image with map and areas - see code in next paragraph!)
2. Code
[[html]] <div style="height: 463px; width: 650px; "> <map name="ImageMap_1_277166699"> <area href="/wiki/Brecilian_Forest" shape="poly" coords="488,276,461,276,461,304,487,304,487,297,489,297,489,276" alt="Brecilian Forest" title="Brecilian Forest"> <area href="/wiki/East_Brecilian_Forest" shape="poly" coords="505,315,487,315,487,297,505,297,505,315" alt="East Brecilian Forest" title="East Brecilian Forest"> <area href="/wiki/Party_Camp" shape="rect" coords="570,36,599,65" alt="Party Camp" title="Party Camp"> <area href="/wiki/Soldier%27s_Peak" shape="rect" coords="354,52,383,81" alt="Soldier's Peak (DLC only)" title="Soldier's Peak (DLC only)"> <area href="/wiki/Denerim" shape="rect" coords="432,104,462,132" alt="Denerim" title="Denerim"> <area href="/wiki/Arl_of_Redcliffe%27s_Estate" shape="rect" coords="471,101,489,119" alt="Arl of Redcliffe's Estate" title="Arl of Redcliffe's Estate"> <area href="/wiki/The_Pearl" shape="rect" coords="466,123,484,142" alt="The Pearl" title="The Pearl"> <area href="/wiki/Elven_Alienage" shape="rect" coords="450,73,468,91" alt="Denerim Alienage" title="Denerim Alienage"> <area href="/wiki/Fort_Drakon" shape="rect" coords="425,83,443,101" alt="Fort Drakon" title="Fort Drakon"> <area href="/wiki/Frostback_Mountain_Pass" shape="rect" coords="55,148,84,176" alt="Frostback Mountains" title="Frostback Mountains"> <area href="/wiki/Orzammar" shape="rect" coords="48,179,76,208" alt="Orzammar" title="Orzammar"> <area href="/wiki/Lake_Calenhad_Docks" shape="rect" coords="167,185,195,213" alt="Lake Calenhad Docks" title="Lake Calenhad Docks"> <area href="/wiki/Circle_Tower" shape="rect" coords="138,175,166,203" alt="Circle Tower" title="Circle Tower"> <area href="/wiki/Redcliffe_Castle" shape="rect" coords="138,272,166,300" alt="Redcliffe Castle" title="Redcliffe Castle"> <area href="/wiki/Redcliffe_Village" shape="rect" coords="130,311,158,340" alt="Redcliffe Village" title="Redcliffe Village"> <area href="/wiki/Lothering" shape="rect" coords="279,242,308,270" alt="Lothering" title="Lothering"> <area href="/wiki/Brecilian_Outskirts" shape="rect" coords="372,248,400,276" alt="Brecilian Outskirts" title="Brecilian Outskirts"> <area href="/Flemeth%27s_Hut" target="_parent" shape="rect" coords="291,392,318,418" alt="Flemeth's Hut" title="Flemeth's Hut"> <area href="/wiki/Ostagar" shape="rect" coords="272,388,290,406" alt="Ostagar" title="Ostagar"> <area href="/wiki/Village_of_Haven" shape="rect" coords="41,273,69,301" alt="Village of Haven" title="Village of Haven"> <area href="/wiki/Honnleath" shape="rect" coords="116,386,144,414" alt="Honnleath (DLC only)" title="Honnleath (DLC only)"> <area href="/wiki/Redcliffe_Dungeons" shape="rect" coords="147,342,165,360" alt="Redcliffe Dungeons" title="Redcliffe Dungeons"> <area href="/wiki/Korcari_Wilds" shape="rect" coords="318,389,334,406" alt="Korcari Wilds" title="Korcari Wilds"> <area href="/wiki/Kadan-Fe_Hideout" shape="rect" coords="419,172,448,201" alt="Kadan-Fe Hideout" title="Kadan-Fe Hideout"> <area href="/wiki/Ruined_Temple" shape="rect" coords="34,354,62,382" alt="Ruined Temple" title="Ruined Temple"> <area href="/wiki/Mountain_Top" shape="rect" coords="62,356,80,375" alt="The Dragon's Lair" title="The Dragon's Lair"> <area href="/wiki/Ortan_Thaig" shape="rect" coords="37,150,55,168" alt="Ortan Thaig" title="Ortan Thaig"> <area href="/wiki/Caridin%27s_Cross" shape="rect" coords="37,133,55,150" alt="Caridin's Cross" title="Caridin's Cross"> <area href="/wiki/Orlais" shape="rect" coords="8,130,35,172" alt="Orlais" title="Orlais"> <area href="/wiki/Aeducan_Thaig" shape="rect" coords="58,126,76,144" alt="Aeducan Thaig" title="Aeducan Thaig"> <area href="/wiki/Dead_Trenches" shape="rect" coords="85,140,103,159" alt="The Dead Trenches" title="The Dead Trenches"> <area href="/wiki/Civil_War_(location)" shape="rect" coords="250,144,279,172" alt="Civil War" title="Civil War"> <area href="/wiki/Battlefield" shape="rect" coords="311,124,340,153" alt="Battlefield" title="Battlefield"> <area href="/wiki/Refugees" shape="rect" coords="318,196,347,224" alt="Refugees" title="Refugees"> <area href="/wiki/Caravan" shape="rect" coords="340,276,369,305" alt="Caravan" title="Caravan"> <area href="/wiki/Dalish_Camp" shape="rect" coords="394,224,413,243" alt="Dalish Camp" title="Dalish Camp"> <area href="/wiki/West_Brecilian_Forest" shape="rect" coords="446,258,463,275" alt="West Brecilian Forest" title="West Brecilian Forest"> <area href="/wiki/Werewolf_Lair" shape="rect" coords="553,290,571,308" alt="Werewolf Lair" title="Werewolf Lair"> <area href="/wiki/Ruins_Upper_Level" shape="rect" coords="571,238,589,257" alt="The Elven Tombs" title="The Elven Tombs"> <area href="/wiki/Brecilian_Ruins" shape="rect" coords="564,261,592,289" alt="Brecilian Ruins" title="Brecilian Ruins"> <area href="/wiki/Royal_Palace" shape="rect" coords="468,83,485,101" alt="Denerim Palace" title="Denerim Palace"> </map> <img src="https://vignette.wikia.nocookie.net/dragonage/images/5/5b/Map_-_World.jpg/revision/latest/scale-to-width-down/650?cb=20091130015324" alt="Map - World" class="thumbimage lzyPlcHld lzyTrns lzyLoaded" data-image-key="Map_-_World.jpg" data-image-name="Map - World.jpg" data-src="https://vignette.wikia.nocookie.net/dragonage/images/5/5b/Map_-_World.jpg/revision/latest/scale-to-width-down/650?cb=20091130015324" onload="if(typeof ImgLzy==='object'){ImgLzy.load(this)}" usemap="#ImageMap_1_277166699" width="650" height="463"> <div style="margin-left: 630px; margin-top: -20px; text-align: left;"> <a href="/wiki/File:Map_-_World.jpg" title="About this image"> <img alt="About this image" src="/extensions/ImageMap/desc-20.png" style="border: none;"> </a></div></div> [[/html]]
3. (External) Links
another issue: all links to other pages have to be in long form ( http…) because of the html window is completely splitted from wikidot.com and not inside your wiki!
And: the link command ( href= ) have to be prepared with target=_new (see bottom for another useful target-attrributes) !
(to create a new tab and not to build the page inside the html/map window.
I have changed ( see next piont) one of teh ares to link to a wiki side page flemeth-s-hut.
in italian:
un altro problema: tutti i collegamenti (Link/href=) ad altre pagine devono essere in forma lunga (http …) perché la finestra html è completamente divisa da wikidot.com e non all'interno della tua wiki!
E: il comando di collegamento/Link deve essere pre-avviato con target = "_new" ! (per creare una nuova scheda e non creare la pagina all'interno della finestra html / map.
Ho cambiato flemeth-s-hut essere un "inside link" in wiki !
4. Changes
<area href="/Flemeth%27s_Hut" target="_parent" shape="rect" coords="291,392,318,418" alt="Flemeth's Hut" title="Flemeth's Hut">Modificato link to flemeth-s-hut ( existe in questo wiki !)
e target="_parent" : creara la nuove pagina a adesso finestra ( non in html finestra)
5. Find Coordinates
You can use image editing software to find the coordinates of your hotspots. I use Photoshop Elements, but Microsoft Paint works just as well. Open your graphic in paint and move your cursor to the location of the coordinates you need. The x,y coordinates are displayed in the bottom left of the application screen.
6. Target attributes
questo informativa pagina dice:
https://www.w3schools.com/tags/att_area_target.asp
<area target="_blank|_self|_parent|_top|framename">| Value | Description |
| _blank | Opens the linked document in a new window or tab |
| _self | Opens the linked document in the same frame as it was clicked |
| _parent | Opens the linked document in the parent frame |
| _top | Opens the linked document in the full body of the window |
| framename | Opens the linked document in a named frame |
7. Documentation:
area : https://www.w3schools.com/tags/tag_area.asp
Image https://www.w3schools.com/html/html_images_imagemap.asp
img: https://www.w3schools.com/tags/tag_img.asp
map: https://www.w3schools.com/tags/tag_map.asp
Important is the connecion by
usemap="#ImageMap_1_277166699" width="650" height="463"> in img Tag ( Image )
corresponding to <div style="height: 463px; width: 650px; ">
<map name="ImageMap_1_277166699"> !