mirror of
https://github.com/Nioux/AideDeJeu.git
synced 2025-10-29 06:26:02 +00:00
Tests
This commit is contained in:
Yan Maniez
parent
e05bdd3d71
commit
2783525e25
4 changed files with 618 additions and 8 deletions
248
Docs/alariantest.html
Normal file
248
Docs/alariantest.html
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Alarian</title>
|
||||
<!-- voir https://github.com/davidjbradshaw/image-map-resizer -->
|
||||
<script type="text/javascript" src="imageMapResizer.js"></script>
|
||||
<!-- voir https://github.com/jackmoore/wheelzoom -->
|
||||
<script type="text/javascript" src="wheelzoom.js"></script>
|
||||
<script type="text/javascript">
|
||||
function init() {
|
||||
/*var slider = document.getElementById("myRange");
|
||||
var output = document.getElementById("myImage");
|
||||
output.style.width = "" + slider.value + "%";
|
||||
imageMapResize();
|
||||
slider.oninput = function() {
|
||||
output.style.width = "" + this.value + "%";
|
||||
imageMapResize();
|
||||
}*/
|
||||
wheelzoom(document.querySelectorAll('img'), {zoom: 0.05});
|
||||
imageMapResize();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()" id="myBody">
|
||||
<img class="zoom" id="myImage" src="alarian.png" alt="Alarian" usemap="#alarian" width='300' />
|
||||
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg"
|
||||
width="150" height="100" viewBox="0 0 3 2">
|
||||
|
||||
<rect width="1" height="2" x="0" fill="#008d46" />
|
||||
<rect width="1" height="2" x="1" fill="#ffffff" />
|
||||
<rect width="1" height="2" x="2" fill="#d2232c" />
|
||||
</svg>
|
||||
<map id="myMap" name="alarian">
|
||||
<!-- Norven -->
|
||||
<area shape="circle" coords="823,425,8" title="Kraod" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="862,419,877,434" title="Shaïa Daod" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="782,481,5" title="??1" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="621,554,5" title="Heim-Hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="726,550,5" title="Törnod" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="754,600,8" title="Ragkaod" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1150,517,5" title="Detad" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="826,609,5" title="Vulfnar" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="673,667,5" title="Ragd-Hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="751,648,5" title="Aelod" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="752,724,8" title="Tzagid" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="811,735,5" title="Roldur" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="709,758,8" title="Jerndal" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="739,777,5" title="Arn" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="783,813,5" title="Berg" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="606,841,8" title="Agtod-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="643,853,5" title="Abod" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="703,860,5" title="Sejer" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1228,648,5" title="Jotun" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1108,711,8" title="Akh" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1004,733,5" title="Afen" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1055,750,8" title="Rzomyad" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1085,724,5" title="Gojd" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1273,745,5" title="Frija 1 ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1062,769,5" title="Tjarom" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="931,783,5" title="Otgeir" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="997,823,5" title="Friel" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1149,814,5" title="Erk" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1226,789,5" title="Frija 2 ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="932,868,5" title="Rikke" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!-- Ystaad -->
|
||||
<area shape="circle" coords="572,904,8" title="Azamp-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="645,891,5" title="Shreven-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="709,913,5" title="Duin-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="578,930,5" title="Mihn-hav 1 ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="634,929,5" title="Mihn-hav 2 ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="757,941,8" title="Yfondh" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="863,950,5" title="Weilgen" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="480,971,5" title="Kalank-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="539,1023,5" title="Bizeim" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="777,1027,5" title="Minheim" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="470,1067,5" title="Fos-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="476,1117,5" title="Ru-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="471,1152,5" title="Sossel-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="699,1091,5" title="Boidenelm ou Lechan ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="718,1130,5" title="Burdel" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="577,1182,5" title="Mistudh" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="523,1207,8" title="Ar-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="545,1236,8" title="Arna" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="536,1298,5" title="Fil-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="553,1353,5" title="Trizan-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="624,1319,5" title="Pel-hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="723,1211,8" title="Misgen" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="760,1193,5" title="??2" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="822,1169,8" title="Yniz" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1051,921,5" title="Hillenrell" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1324,866,8" title="Gleaor" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1062,1017,5" title="Fingein" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1196,978,5" title="Chateau-Milon" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1356,940,8" title="Baran" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1350,985,5" title="Luzon" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1380,983,5" title="?? 107" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1252,1055,5" title="" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1328,1023,5" title="?? 109" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="835,1080,5" title="Frima" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="956,1085,5" title="Mielhm" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="857,1152,5" title="?? 112" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="886,1129,5" title="Got" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="930,1134,8" title="Ylous" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="978,1109,5" title="Ponto" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1044,1094,5" title="Hügin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1086,1094,5" title="Fort-lun" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1142,1066,5" title="Troisile" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1059,1128,5" title="Rama" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1101,1130,8" title="Mas-rouge" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1129,1107,8" title="Alnaad" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="835,1208,8" title="Tallien" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="824,1236,8" title="Eswir" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="919,1181,5" title="Essa" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="965,1226,5" title="Eloz" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1174,1185,5" title="Boidel" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1220,1143,5" title="Chateau-lahute" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1289,1147,5" title="?? 128" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1240,1249,8" title="Haute-bannière" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="839,1277,8" title="Talbeth-Hav" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!-- Talban -->
|
||||
<area shape="circle" coords="927,1282,5" title="Yriell" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1010,1260,5" title="Kerzok" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="857,1313,5" title="Lynn" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="994,1314,5" title="Karn" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1053,1321,5" title="Bryon" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="814,1357,5" title="Noirok" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="886,1353,5" title="Pryel" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="777,1422,5" title="Barall" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="963,1382,977,1396" title="Thahad-Kohök" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="777,1478,5" title="Mörn" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1121,1464,5" title="Linceul" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="690,1553,5" title="Roc-Hav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="838,1610,8" title="Ynha" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="963,1594,5" title="Lehün" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="867,1649,5" title="Yehav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="978,1668,5" title="Orha" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1092,1625,5" title="Tarah" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1040,1727,8" title="Yomhalin" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!-- Yelin -->
|
||||
<area shape="circle" coords="1379,1295,5" title="Gipelli" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1302,1336,5" title="Bradnstoni" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1354,1342,5" title="Menillo" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1425,1314,1437,1326" title="Castel Rü" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1526,1330,5" title="Rüyaden" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1433,1375,5" title="Pool" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1362,1412,5" title="Rundale" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1574,1436,8" title="Kalid-da" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1384,1451,5" title="Nola" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1310,1494,5" title="Gwym" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1485,1490,8" title="Shelin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1538,1498,5" title="Sleblin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1202,1529,5" title="Marloed" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1433,1531,5" title="Llenry" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1472,1527,5" title="Shtaff" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1538,1556,5" title="Lamphey-Alta" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1242,1659,5" title="Kalgharne" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1364,1628,1379,1644" title="Karst-Balamer" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1371,1661,5" title="Castel Crin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1073,1705,1087,1720" title="Castel Roc 1 ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1116,1722,5" title="Castel Roc 2 ?" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1244,1742,1256,1755" title="Castel Andelin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1228,1771,8" title="Andelin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1428,1776,5" title="Emlin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1344,1810,5" title="Fordin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1274,1836,5" title="Tenbin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1386,1864,5" title="Naylin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1436,1869,1448,1882" title="Castel d'Or" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!-- Rhü -->
|
||||
<area shape="circle" coords="1400,808,5" title="Tenwyr" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1432,831,5" title="Nimue" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1405,898,5" title="Laudin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1573,881,5" title="Ysawe" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1761,839,1776,852" title="Tour-les-hauts" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1531,918,5" title="Elemon" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1552,949,5" title="Kern-endel" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1475,975,5" title="Braill" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1393,1038,5" title="Irfley" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1597,1013,8" title="Sertal" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1472,1093,5" title="Bors" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1332,1166,5" title="?? 201" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1375,1180,5" title="Awain" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1305,1246,5" title="Gamord" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1434,1238,8" title="Nefva" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1692,1239,1705,1251" title="Tour-le-chêne" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1762,1250,5" title="Greth" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1820,1225,1832,1238" title="Tour Ywaine" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1504,1295,5" title="Galehaut" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1671,1305,5" title="Linor" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1595,1337,5" title="Keu" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1683,1371,5" title="Erec" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1983,791,8" title="Gher-Noircav" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1980,870,8" title="Cavendir" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1895,981,8" title="Cavand" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1903,1122,8" title="Cro" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="2083,1331,8" title="Seneol" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!-- Gramlin -->
|
||||
<area shape="circle" coords="2012,1387,8" title="Vala" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="2128,1502,8" title="Shamaen" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1850,1481,1862,1494" title="Fort-du-Rhü" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1673,1520,5" title="Adha" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1750,1531,5" title="Diran" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1610,1557,5" title="Threned" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1545,1642,1558,1654" title="Fort-Lahin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1553,1674,5" title="Lahin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1648,1691,5" title="Thël" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1742,1689,5" title="Ilik" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1902,1705,5" title="Boissin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="2045,1707,5" title="Uilin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1505,1724,5" title="Enlë" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1493,1773,5" title="Delwë" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1488,1843,5" title="Wa'al" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1565,1846,5" title="Feulin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1844,1865,5" title="Wëolin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1937,1857,5" title="Frell" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="2150,1803,5" title="Brüm" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="2112,1844,8" title="Alaëhn" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1448,1919,8" title="Nilin-Oloran" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1493,1902,1506,1913" title="Fort-Kei" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1558,1941,8" title="Flamlin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1638,1925,1651,1938" title="Fort-Elor" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="2141,1938,2158,1951" title="Fort-Ithil" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1669,1939,8" title="Demon-Astang" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1665,1994,8" title="Draganlin" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1558,2010,5" title="Dran" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1641,2028,1654,2040" title="Fort-Hilyen" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="rect" coords="1511,2096,1525,2108" title="Fort-Buhlan" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!--Rhagarron -->
|
||||
<area shape="rect" coords="1527,2150,1538,2163" title="?? 301" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1515,2226,8" title="Velolia" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1416,2261,8" title="Astudipshir" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1480,2376,8" title="Saub" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="1488,2503,8" title="Yatsim" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
<!-- Smitin -->
|
||||
<area shape="circle" coords="464,2080,8" title="Jost" href="javascript:" onclick="alert(this.title)" />
|
||||
<area shape="circle" coords="931,2060,8" title="Bloseon" href="javascript:" onclick="alert(this.title)" />
|
||||
|
||||
</map>
|
||||
<!--<input type="range" min="30" max="250" value="100" class="slider" id="myRange" style="position: fixed; top: 0; left: 0; width: 15%; height: 5%" />-->
|
||||
</body>
|
||||
</html>
|
||||
163
Docs/imageMapResizer.js
Normal file
163
Docs/imageMapResizer.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
/*! Image Map Resizer
|
||||
* Desc: Resize HTML imageMap to scaled image.
|
||||
* Copyright: (c) 2014-15 David J. Bradshaw - dave@bradshaw.net
|
||||
* License: MIT
|
||||
*/
|
||||
|
||||
;(function() {
|
||||
'use strict'
|
||||
|
||||
function scaleImageMap() {
|
||||
function resizeMap() {
|
||||
function resizeAreaTag(cachedAreaCoords, idx) {
|
||||
function scale(coord) {
|
||||
var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height'
|
||||
return (
|
||||
padding[dimension] +
|
||||
Math.floor(Number(coord) * scalingFactor[dimension])
|
||||
)
|
||||
}
|
||||
|
||||
var isWidth = 0
|
||||
areas[idx].coords = cachedAreaCoords
|
||||
.split(',')
|
||||
.map(scale)
|
||||
.join(',')
|
||||
}
|
||||
|
||||
var scalingFactor = {
|
||||
width: image.width / image.naturalWidth,
|
||||
height: image.height / image.naturalHeight,
|
||||
}
|
||||
|
||||
var padding = {
|
||||
width: parseInt(
|
||||
window.getComputedStyle(image, null).getPropertyValue('padding-left'),
|
||||
10
|
||||
),
|
||||
height: parseInt(
|
||||
window.getComputedStyle(image, null).getPropertyValue('padding-top'),
|
||||
10
|
||||
),
|
||||
}
|
||||
|
||||
cachedAreaCoordsArray.forEach(resizeAreaTag)
|
||||
}
|
||||
|
||||
function getCoords(e) {
|
||||
//Normalize coord-string to csv format without any space chars
|
||||
return e.coords.replace(/ *, */g, ',').replace(/ +/g, ',')
|
||||
}
|
||||
|
||||
function debounce() {
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(resizeMap, 250)
|
||||
}
|
||||
|
||||
function start() {
|
||||
if (
|
||||
image.width !== image.naturalWidth ||
|
||||
image.height !== image.naturalHeight
|
||||
) {
|
||||
resizeMap()
|
||||
}
|
||||
}
|
||||
|
||||
function addEventListeners() {
|
||||
image.addEventListener('load', resizeMap, false) //Detect late image loads in IE11
|
||||
window.addEventListener('focus', resizeMap, false) //Cope with window being resized whilst on another tab
|
||||
window.addEventListener('resize', debounce, false)
|
||||
window.addEventListener('readystatechange', resizeMap, false)
|
||||
document.addEventListener('fullscreenchange', resizeMap, false)
|
||||
}
|
||||
|
||||
function beenHere() {
|
||||
return 'function' === typeof map._resize
|
||||
}
|
||||
|
||||
function getImg(name) {
|
||||
return document.querySelector('img[usemap="' + name + '"]')
|
||||
}
|
||||
|
||||
function setup() {
|
||||
areas = map.getElementsByTagName('area')
|
||||
cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords)
|
||||
image = getImg('#' + map.name) || getImg(map.name)
|
||||
map._resize = resizeMap //Bind resize method to HTML map element
|
||||
}
|
||||
|
||||
var /*jshint validthis:true */
|
||||
map = this,
|
||||
areas = null,
|
||||
cachedAreaCoordsArray = null,
|
||||
image = null,
|
||||
timer = null
|
||||
|
||||
if (!beenHere()) {
|
||||
setup()
|
||||
addEventListeners()
|
||||
start()
|
||||
} else {
|
||||
map._resize() //Already setup, so just resize map
|
||||
}
|
||||
}
|
||||
|
||||
function factory() {
|
||||
function chkMap(element) {
|
||||
if (!element.tagName) {
|
||||
throw new TypeError('Object is not a valid DOM element')
|
||||
} else if ('MAP' !== element.tagName.toUpperCase()) {
|
||||
throw new TypeError(
|
||||
'Expected <MAP> tag, found <' + element.tagName + '>.'
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function init(element) {
|
||||
if (element) {
|
||||
chkMap(element)
|
||||
scaleImageMap.call(element)
|
||||
maps.push(element)
|
||||
}
|
||||
}
|
||||
|
||||
var maps
|
||||
|
||||
return function imageMapResizeF(target) {
|
||||
maps = [] // Only return maps from this call
|
||||
|
||||
switch (typeof target) {
|
||||
case 'undefined':
|
||||
case 'string':
|
||||
Array.prototype.forEach.call(
|
||||
document.querySelectorAll(target || 'map'),
|
||||
init
|
||||
)
|
||||
break
|
||||
case 'object':
|
||||
init(target)
|
||||
break
|
||||
default:
|
||||
throw new TypeError('Unexpected data type (' + typeof target + ').')
|
||||
}
|
||||
|
||||
return maps
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define([], factory)
|
||||
} else if (typeof module === 'object' && typeof module.exports === 'object') {
|
||||
module.exports = factory() //Node for browserfy
|
||||
} else {
|
||||
window.imageMapResize = factory()
|
||||
}
|
||||
|
||||
if ('jQuery' in window) {
|
||||
window.jQuery.fn.imageMapResize = function $imageMapResizeF() {
|
||||
return this.filter('map')
|
||||
.each(scaleImageMap)
|
||||
.end()
|
||||
}
|
||||
}
|
||||
})()
|
||||
8
Docs/imageMapResizer.min.js
vendored
8
Docs/imageMapResizer.min.js
vendored
|
|
@ -1,8 +0,0 @@
|
|||
/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.10 - 2019-04-10
|
||||
* Desc: Resize HTML imageMap to scaled image.
|
||||
* Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net
|
||||
* License: MIT
|
||||
*/
|
||||
|
||||
!function(){"use strict";function r(){function e(){var r={width:u.width/u.naturalWidth,height:u.height/u.naturalHeight},a={width:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-top"),10)};i.forEach(function(e,t){var n=0;o[t].coords=e.split(",").map(function(e){var t=1==(n=1-n)?"width":"height";return a[t]+Math.floor(Number(e)*r[t])}).join(",")})}function t(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")}function n(){clearTimeout(d),d=setTimeout(e,250)}function r(e){return document.querySelector('img[usemap="'+e+'"]')}var a=this,o=null,i=null,u=null,d=null;"function"!=typeof a._resize?(o=a.getElementsByTagName("area"),i=Array.prototype.map.call(o,t),u=r("#"+a.name)||r(a.name),a._resize=e,u.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",n,!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),u.width===u.naturalWidth&&u.height===u.naturalHeight||e()):a._resize()}function e(){function t(e){e&&(!function(e){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==e.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+e.tagName+">.")}(e),r.call(e),n.push(e))}var n;return function(e){switch(n=[],typeof e){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(e||"map"),t);break;case"object":t(e);break;default:throw new TypeError("Unexpected data type ("+typeof e+").")}return n}}"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e():window.imageMapResize=e(),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(r).end()})}();
|
||||
//# sourceMappingURL=imageMapResizer.map
|
||||
207
Docs/wheelzoom.js
Normal file
207
Docs/wheelzoom.js
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
/*!
|
||||
Wheelzoom 4.0.1
|
||||
license: MIT
|
||||
http://www.jacklmoore.com/wheelzoom
|
||||
*/
|
||||
window.wheelzoom = (function(){
|
||||
var defaults = {
|
||||
zoom: 0.10,
|
||||
maxZoom: false,
|
||||
initialZoom: 1,
|
||||
initialX: 0.5,
|
||||
initialY: 0.5,
|
||||
};
|
||||
|
||||
var main = function(img, options){
|
||||
if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
|
||||
|
||||
var settings = {};
|
||||
var width;
|
||||
var height;
|
||||
var bgWidth;
|
||||
var bgHeight;
|
||||
var bgPosX;
|
||||
var bgPosY;
|
||||
var previousEvent;
|
||||
var transparentSpaceFiller;
|
||||
|
||||
function setSrcToBackground(img) {
|
||||
img.style.backgroundRepeat = 'no-repeat';
|
||||
img.style.backgroundImage = 'url("'+img.src+'")';
|
||||
transparentSpaceFiller = 'data:image/svg+xml;base64,'+window.btoa('<svg xmlns="http://www.w3.org/2000/svg" width="'+img.naturalWidth+'" height="'+img.naturalHeight+'"></svg>');
|
||||
img.src = transparentSpaceFiller;
|
||||
}
|
||||
|
||||
function updateBgStyle() {
|
||||
if (bgPosX > 0) {
|
||||
bgPosX = 0;
|
||||
} else if (bgPosX < width - bgWidth) {
|
||||
bgPosX = width - bgWidth;
|
||||
}
|
||||
|
||||
if (bgPosY > 0) {
|
||||
bgPosY = 0;
|
||||
} else if (bgPosY < height - bgHeight) {
|
||||
bgPosY = height - bgHeight;
|
||||
}
|
||||
|
||||
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
|
||||
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
|
||||
}
|
||||
|
||||
function reset() {
|
||||
bgWidth = width;
|
||||
bgHeight = height;
|
||||
bgPosX = bgPosY = 0;
|
||||
updateBgStyle();
|
||||
}
|
||||
|
||||
function onwheel(e) {
|
||||
var deltaY = 0;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
|
||||
deltaY = e.deltaY;
|
||||
} else if (e.wheelDelta) {
|
||||
deltaY = -e.wheelDelta;
|
||||
}
|
||||
|
||||
// As far as I know, there is no good cross-browser way to get the cursor position relative to the event target.
|
||||
// We have to calculate the target element's position relative to the document, and subtrack that from the
|
||||
// cursor's position relative to the document.
|
||||
var rect = img.getBoundingClientRect();
|
||||
var offsetX = e.pageX - rect.left - window.pageXOffset;
|
||||
var offsetY = e.pageY - rect.top - window.pageYOffset;
|
||||
|
||||
// Record the offset between the bg edge and cursor:
|
||||
var bgCursorX = offsetX - bgPosX;
|
||||
var bgCursorY = offsetY - bgPosY;
|
||||
|
||||
// Use the previous offset to get the percent offset between the bg edge and cursor:
|
||||
var bgRatioX = bgCursorX/bgWidth;
|
||||
var bgRatioY = bgCursorY/bgHeight;
|
||||
|
||||
// Update the bg size:
|
||||
if (deltaY < 0) {
|
||||
bgWidth += bgWidth*settings.zoom;
|
||||
bgHeight += bgHeight*settings.zoom;
|
||||
} else {
|
||||
bgWidth -= bgWidth*settings.zoom;
|
||||
bgHeight -= bgHeight*settings.zoom;
|
||||
}
|
||||
|
||||
if (settings.maxZoom) {
|
||||
bgWidth = Math.min(width*settings.maxZoom, bgWidth);
|
||||
bgHeight = Math.min(height*settings.maxZoom, bgHeight);
|
||||
}
|
||||
|
||||
// Take the percent offset and apply it to the new size:
|
||||
bgPosX = offsetX - (bgWidth * bgRatioX);
|
||||
bgPosY = offsetY - (bgHeight * bgRatioY);
|
||||
|
||||
// Prevent zooming out beyond the starting size
|
||||
if (bgWidth <= width || bgHeight <= height) {
|
||||
reset();
|
||||
} else {
|
||||
updateBgStyle();
|
||||
}
|
||||
imageMapResize();
|
||||
}
|
||||
|
||||
function drag(e) {
|
||||
e.preventDefault();
|
||||
bgPosX += (e.pageX - previousEvent.pageX);
|
||||
bgPosY += (e.pageY - previousEvent.pageY);
|
||||
previousEvent = e;
|
||||
updateBgStyle();
|
||||
}
|
||||
|
||||
function removeDrag() {
|
||||
document.removeEventListener('mouseup', removeDrag);
|
||||
document.removeEventListener('mousemove', drag);
|
||||
}
|
||||
|
||||
// Make the background draggable
|
||||
function draggable(e) {
|
||||
e.preventDefault();
|
||||
previousEvent = e;
|
||||
document.addEventListener('mousemove', drag);
|
||||
document.addEventListener('mouseup', removeDrag);
|
||||
}
|
||||
|
||||
function load() {
|
||||
var initial = Math.max(settings.initialZoom, 1);
|
||||
|
||||
if (img.src === transparentSpaceFiller) return;
|
||||
|
||||
var computedStyle = window.getComputedStyle(img, null);
|
||||
|
||||
width = parseInt(computedStyle.width, 10);
|
||||
height = parseInt(computedStyle.height, 10);
|
||||
bgWidth = width * initial;
|
||||
bgHeight = height * initial;
|
||||
bgPosX = -(bgWidth - width) * settings.initialX;
|
||||
bgPosY = -(bgHeight - height) * settings.initialY;
|
||||
|
||||
setSrcToBackground(img);
|
||||
|
||||
img.style.backgroundSize = bgWidth+'px '+bgHeight+'px';
|
||||
img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px';
|
||||
img.addEventListener('wheelzoom.reset', reset);
|
||||
|
||||
img.addEventListener('wheel', onwheel);
|
||||
img.addEventListener('mousedown', draggable);
|
||||
}
|
||||
|
||||
var destroy = function (originalProperties) {
|
||||
img.removeEventListener('wheelzoom.destroy', destroy);
|
||||
img.removeEventListener('wheelzoom.reset', reset);
|
||||
img.removeEventListener('load', load);
|
||||
img.removeEventListener('mouseup', removeDrag);
|
||||
img.removeEventListener('mousemove', drag);
|
||||
img.removeEventListener('mousedown', draggable);
|
||||
img.removeEventListener('wheel', onwheel);
|
||||
|
||||
img.style.backgroundImage = originalProperties.backgroundImage;
|
||||
img.style.backgroundRepeat = originalProperties.backgroundRepeat;
|
||||
img.src = originalProperties.src;
|
||||
}.bind(null, {
|
||||
backgroundImage: img.style.backgroundImage,
|
||||
backgroundRepeat: img.style.backgroundRepeat,
|
||||
src: img.src
|
||||
});
|
||||
|
||||
img.addEventListener('wheelzoom.destroy', destroy);
|
||||
|
||||
options = options || {};
|
||||
|
||||
Object.keys(defaults).forEach(function(key){
|
||||
settings[key] = options[key] !== undefined ? options[key] : defaults[key];
|
||||
});
|
||||
|
||||
if (img.complete) {
|
||||
load();
|
||||
}
|
||||
|
||||
img.addEventListener('load', load);
|
||||
};
|
||||
|
||||
// Do nothing in IE9 or below
|
||||
if (typeof window.btoa !== 'function') {
|
||||
return function(elements) {
|
||||
return elements;
|
||||
};
|
||||
} else {
|
||||
return function(elements, options) {
|
||||
if (elements && elements.length) {
|
||||
Array.prototype.forEach.call(elements, function (node) {
|
||||
main(node, options);
|
||||
});
|
||||
} else if (elements && elements.nodeName) {
|
||||
main(elements, options);
|
||||
}
|
||||
return elements;
|
||||
};
|
||||
}
|
||||
}());
|
||||
Loading…
Add table
Add a link
Reference in a new issue