5E/AideDeJeu
1
0
Fork 0
mirror of https://github.com/Nioux/AideDeJeu.git synced 2025-10-29 22:45:44 +00:00
Code Issues Projects Releases Wiki Activity

Zoom zoom zoom

Browse source
This commit is contained in:
Yan Maniez 2019-12-28 20:48:56 +01:00
parent 0279c234b4
commit 282cea67a1
2 changed files with 30 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
Docs/alarian.html
View file

@ -3,12 +3,27 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alarian</title> <title>Alarian</title>
<!-- voir https://github.com/davidjbradshaw/image-map-resizer -->
<script type="text/javascript" src="imageMapResizer.min.js"></script>
<script type="text/javascript">
function init() {
imageMapResize();
var slider = document.getElementById("myRange");
var output = document.getElementById("myImage");
output.style.width = "" + slider.value + "%";
slider.oninput = function() {
output.style.width = "" + this.value + "%";
imageMapResize();
}
}
</script>
</head> </head>
<body> <body onload="init()">
<img src="alarian.png" alt="Alarian" usemap="#alarian"> <img id="myImage" src="alarian.png" alt="Alarian" usemap="#alarian" />
<map name="alarian"> <map id="myMap" name="alarian">
<area shape="rect" coords="862,419,877,434" alt="Shaïa Daod" href="javascript:alert('Shaïa Daod')" title="Shaïa Daod"> <area shape="rect" coords="862,419,877,434" alt="Shaïa Daod" href="javascript:alert('Shaïa Daod')" title="Shaïa Daod" />
<area shape="circle" coords="643,853,5" alt="Abod" href="javascript:alert('Abod')" title="Abod"> <area shape="circle" coords="643,853,5" alt="Abod" href="javascript:alert('Abod')" title="Abod" />
</map> </map>
<input type="range" min="30" max="250" value="30" class="slider" id="myRange" style="position: fixed; top: 0; left: 0" />
</body> </body>
</html> </html>

8
Docs/imageMapResizer.min.js vendored Normal file
View file

@ -0,0 +1,8 @@
/*! 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