diff --git a/public_html/css/styles.css b/public_html/css/styles.css
index e31b49b..749ee4c 100644
--- a/public_html/css/styles.css
+++ b/public_html/css/styles.css
@@ -156,11 +156,12 @@ header {
header img {
margin: 0 auto;
- height: 30vh;
- width: auto;
+ height: 35vh;
+ width: 100%;
display: block;
object-fit: cover;
object-position: left;
+ max-width:1600px;
}
main {
diff --git a/public_html/index.html b/public_html/index.html
index 2b2be34..d9b6d37 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -8,12 +8,13 @@
-
+
+
@@ -25,7 +26,12 @@
- 
+
+
diff --git a/public_html/js/index.js b/public_html/js/index.js
new file mode 100644
index 0000000..aafc3dd
--- /dev/null
+++ b/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);
+};
\ No newline at end of file