From 424bea0e4b53ee42fb9e5391a27fa71221cf198d Mon Sep 17 00:00:00 2001
From: Lee Hanken <github-12-2017-ds8@leehanken.uk>
Date: Sat, 1 Feb 2025 13:53:30 +0000
Subject: [PATCH] Include image map for HPR initials and scale using javascript
---
public_html/css/styles.css | 5 ++--
public_html/index.html | 10 ++++++--
public_html/js/index.js | 52 ++++++++++++++++++++++++++++++++++++++
3 files changed, 63 insertions(+), 4 deletions(-)
create mode 100644 public_html/js/index.js
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 @@
<meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett">
<meta name="keywords" content="Technology, Tech News, Education, Training">
<meta name="description" content="Hacker Public Radio is a podcast that releases shows every weekday Monday through Friday. Our shows are produced by the community (you) and can be on any topic that is of interest to hackers and hobbyists.">
- <link rel="shortcut icon" href="hpr.ico">
+ <link rel="icon" href="hpr.ico">
<link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Opus RSS" href="/hpr_opus_rss.php">
<link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Ogg Vorbis RSS" href="/hpr_ogg_rss.php">
<link rel="alternate" type="application/rss+xml" title="Hacker Public Radio MP3 RSS" href="/hpr_mp3_rss.php">
<link rel="alternate" type="application/rss+xml" title="Hacker Public Radio Comments RSS" href="/comments.rss">
<link rel="license" title="CC BY-SA 4.0" href="https://creativecommons.org/licenses/by-sa/4.0/">
+ <script src="js/index.js"></script>
</head>
<body>
@@ -25,7 +26,12 @@
</nav>
<header class="title">
- <img src="images/logo.png" alt="Hacker Public Radio" aria-description="H.P.R. Hacker Public Radio https://HackerPublicRadio.org, The Community Podcast, Sharing Your Ideas, Projects, Options since 2005, New Episodes Every Weekday" />
+ <img class="banner" src="images/logo.png" alt="Hacker Public Radio" aria-description="H.P.R. Hacker Public Radio https://HackerPublicRadio.org, The Community Podcast, Sharing Your Ideas, Projects, Options since 2005, New Episodes Every Weekday" usemap="#bannermap" />
+ <map class="bannermap" name="bannermap">
+ <area shape="rect" coords="108,187,240,343" href="https://hackerpublicradio.org/correspondents/index.html" alt="hacker" title="hacker"/>
+ <area shape="rect" coords="246,187,359,343" href="https://hackerpublicradio.org/comments_viewer.html" alt="public" title="public" />
+ <area shape="rect" coords="363,187,492,343" href="https://hackerpublicradio.org/syndication.html" alt="radio" title="radio" />
+ </map>
</header>
<main>
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