Include image map for HPR initials and scale using javascript

public_html/js/index.js

@@ -0,0 +1,52 @@
+window.onload = () => {
+
+	/* scale benner image map co-ordinates */
+	
+	const image = document.querySelector('.banner');
+	const areas = document.querySelectorAll('.bannermap > area');	
+
+	const max_width = 1600;
+	const image_height_ratio = 0.35;
+
+	const image_map_coords = [
+		[108,187,240,343],
+		[246,187,359,343],
+		[363,187,492,343]
+	];
+
+	function calcTransform(prop) {		
+		let scale, offset;
+		prop.original_aspect = prop.original_width / prop.original_height;
+		prop.scaled_width = prop.image_height * prop.original_aspect;
+		prop.image_aspect = prop.image_width / prop.image_height;
+		if (prop.scaled_width < prop.image_width) {
+			prop.scaled_height = prop.image_height * prop.image_aspect / prop.original_aspect;
+			offset = (prop.image_height - prop.scaled_height) / 2;
+			scale = prop.scaled_height / prop.original_height;
+		} else {
+			offset = 0;
+			scale = prop.image_height / prop.original_height;
+		}
+		return [scale, offset];
+	}
+
+	function setCoords() {		
+		areas.forEach((area, index) => {
+			const [x1, y1, x2, y2] = image_map_coords[index];			
+			let prop = {
+				screen_width: (window.innerWidth),
+				contained_width: (window.innerWidth <= max_width) ? window.innerWidth : max_width,
+				screen_height: window.innerHeight,
+				image_width: image.offsetWidth,
+				image_height: image.offsetHeight,
+				original_width: image.naturalWidth,
+				original_height: image.naturalHeight
+			};
+			let [ scale, offset ] = calcTransform(prop);
+			const scaled_coords = `${x1*scale}, ${y1*scale + offset}, ${x2*scale}, ${y2*scale + offset}`;
+			area.setAttribute('coords', scaled_coords);
+		});
+	}
+	
+	new ResizeObserver(setCoords).observe(image);
+};