Posted by Helmut_pdorf on 11 Jul 2020 12:10, last edited by Helmut_pdorf on 11 Jul 2020 12:21
: 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]] <divstyle="height: 463px; width: 650px; "><mapname="ImageMap_1_277166699"><areahref="/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"><areahref="/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"><areahref="/wiki/Party_Camp"shape="rect"coords="570,36,599,65"alt="Party Camp"title="Party Camp"><areahref="/wiki/Soldier%27s_Peak"shape="rect"coords="354,52,383,81"alt="Soldier's Peak (DLC only)"title="Soldier's Peak (DLC only)"><areahref="/wiki/Denerim"shape="rect"coords="432,104,462,132"alt="Denerim"title="Denerim"><areahref="/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"><areahref="/wiki/The_Pearl"shape="rect"coords="466,123,484,142"alt="The Pearl"title="The Pearl"><areahref="/wiki/Elven_Alienage"shape="rect"coords="450,73,468,91"alt="Denerim Alienage"title="Denerim Alienage"><areahref="/wiki/Fort_Drakon"shape="rect"coords="425,83,443,101"alt="Fort Drakon"title="Fort Drakon"><areahref="/wiki/Frostback_Mountain_Pass"shape="rect"coords="55,148,84,176"alt="Frostback Mountains"title="Frostback Mountains"><areahref="/wiki/Orzammar"shape="rect"coords="48,179,76,208"alt="Orzammar"title="Orzammar"><areahref="/wiki/Lake_Calenhad_Docks"shape="rect"coords="167,185,195,213"alt="Lake Calenhad Docks"title="Lake Calenhad Docks"><areahref="/wiki/Circle_Tower"shape="rect"coords="138,175,166,203"alt="Circle Tower"title="Circle Tower"><areahref="/wiki/Redcliffe_Castle"shape="rect"coords="138,272,166,300"alt="Redcliffe Castle"title="Redcliffe Castle"><areahref="/wiki/Redcliffe_Village"shape="rect"coords="130,311,158,340"alt="Redcliffe Village"title="Redcliffe Village"><areahref="/wiki/Lothering"shape="rect"coords="279,242,308,270"alt="Lothering"title="Lothering"><areahref="/wiki/Brecilian_Outskirts"shape="rect"coords="372,248,400,276"alt="Brecilian Outskirts"title="Brecilian Outskirts"><areahref="/Flemeth%27s_Hut"target="_parent"shape="rect"coords="291,392,318,418"alt="Flemeth's Hut"title="Flemeth's Hut"><areahref="/wiki/Ostagar"shape="rect"coords="272,388,290,406"alt="Ostagar"title="Ostagar"><areahref="/wiki/Village_of_Haven"shape="rect"coords="41,273,69,301"alt="Village of Haven"title="Village of Haven"><areahref="/wiki/Honnleath"shape="rect"coords="116,386,144,414"alt="Honnleath (DLC only)"title="Honnleath (DLC only)"><areahref="/wiki/Redcliffe_Dungeons"shape="rect"coords="147,342,165,360"alt="Redcliffe Dungeons"title="Redcliffe Dungeons"><areahref="/wiki/Korcari_Wilds"shape="rect"coords="318,389,334,406"alt="Korcari Wilds"title="Korcari Wilds"><areahref="/wiki/Kadan-Fe_Hideout"shape="rect"coords="419,172,448,201"alt="Kadan-Fe Hideout"title="Kadan-Fe Hideout"><areahref="/wiki/Ruined_Temple"shape="rect"coords="34,354,62,382"alt="Ruined Temple"title="Ruined Temple"><areahref="/wiki/Mountain_Top"shape="rect"coords="62,356,80,375"alt="The Dragon's Lair"title="The Dragon's Lair"><areahref="/wiki/Ortan_Thaig"shape="rect"coords="37,150,55,168"alt="Ortan Thaig"title="Ortan Thaig"><areahref="/wiki/Caridin%27s_Cross"shape="rect"coords="37,133,55,150"alt="Caridin's Cross"title="Caridin's Cross"><areahref="/wiki/Orlais"shape="rect"coords="8,130,35,172"alt="Orlais"title="Orlais"><areahref="/wiki/Aeducan_Thaig"shape="rect"coords="58,126,76,144"alt="Aeducan Thaig"title="Aeducan Thaig"><areahref="/wiki/Dead_Trenches"shape="rect"coords="85,140,103,159"alt="The Dead Trenches"title="The Dead Trenches"><areahref="/wiki/Civil_War_(location)"shape="rect"coords="250,144,279,172"alt="Civil War"title="Civil War"><areahref="/wiki/Battlefield"shape="rect"coords="311,124,340,153"alt="Battlefield"title="Battlefield"><areahref="/wiki/Refugees"shape="rect"coords="318,196,347,224"alt="Refugees"title="Refugees"><areahref="/wiki/Caravan"shape="rect"coords="340,276,369,305"alt="Caravan"title="Caravan"><areahref="/wiki/Dalish_Camp"shape="rect"coords="394,224,413,243"alt="Dalish Camp"title="Dalish Camp"><areahref="/wiki/West_Brecilian_Forest"shape="rect"coords="446,258,463,275"alt="West Brecilian Forest"title="West Brecilian Forest"><areahref="/wiki/Werewolf_Lair"shape="rect"coords="553,290,571,308"alt="Werewolf Lair"title="Werewolf Lair"><areahref="/wiki/Ruins_Upper_Level"shape="rect"coords="571,238,589,257"alt="The Elven Tombs"title="The Elven Tombs"><areahref="/wiki/Brecilian_Ruins"shape="rect"coords="564,261,592,289"alt="Brecilian Ruins"title="Brecilian Ruins"><areahref="/wiki/Royal_Palace"shape="rect"coords="468,83,485,101"alt="Denerim Palace"title="Denerim Palace"></map><imgsrc="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"><divstyle="margin-left: 630px; margin-top: -20px; text-align: left;"><ahref="/wiki/File:Map_-_World.jpg"title="About this image"><imgalt="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">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"> !