lee/DraftHPRSplash
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Include image map for HPR initials and scale using javascript

Browse Source
This commit is contained in:
Lee Hanken 2025-02-01 13:53:30 +00:00
parent c3dfad57e2
commit 424bea0e4b
3 changed files with 63 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public_html/css/styles.css
View File

@ -156,11 +156,12 @@ header {
header img { header img {
margin: 0 auto; margin: 0 auto;
height: 30vh; height: 35vh;
width: auto; width: 100%;
display: block; display: block;
object-fit: cover; object-fit: cover;
object-position: left; object-position: left;
max-width:1600px;
} }
main { main {

10
public_html/index.html
View File

@ -8,12 +8,13 @@
<meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett"> <meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett">
<meta name="keywords" content="Technology, Tech News, Education, Training"> <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."> <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 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 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 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="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/"> <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> </head>
<body> <body>
@ -25,7 +26,12 @@
</nav> </nav>
<header class="title"> <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> </header>
<main> <main>

52
public_html/js/index.js Normal file
View File

@ -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);
};