TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Building an interactive clickable map for my blog

60 pointsby topcat31about 2 years ago

8 comments

spacedcowboyabout 2 years ago
When I were a nipper, after walking uphill t&#x27;mill and uphill back home, after a full 26 hours of work in the evening I&#x27;d drag out the cardboard box with the soggy &quot;modem&quot; string and use an image map[1] for that there stuff.<p>Kids these days with their ess-vee-gee... Dunno they&#x27;re born.<p>1: <a href="https:&#x2F;&#x2F;www.w3schools.com&#x2F;html&#x2F;html_images_imagemap.asp" rel="nofollow">https:&#x2F;&#x2F;www.w3schools.com&#x2F;html&#x2F;html_images_imagemap.asp</a>
评论 #35454414 未加载
评论 #35431489 未加载
asimpletuneabout 2 years ago
I too put my site&#x27;s landing nav in an illustration: <a href="https:&#x2F;&#x2F;spenc.es" rel="nofollow">https:&#x2F;&#x2F;spenc.es</a><p>The SVG spec is huge and totally under-appreciated. There is plenty of it too that hasn&#x27;t been implemented by browser vendors yet, like mesh gradients. There&#x27;s even an animation language (that doesn&#x27;t use CSS or JS) called SMIL that I didn&#x27;t even know existed until about a week ago.<p>SVG though is super powerful and its full potential has yet to be realized. It is for graphics what HTML is for content, thus making layers, paths, groups, everything scriptable.
评论 #35456763 未加载
评论 #35453150 未加载
评论 #35454167 未加载
rcarmoabout 2 years ago
Nice. I went a little overboard with mine:<p><a href="https:&#x2F;&#x2F;taoofmac.com&#x2F;static&#x2F;graph" rel="nofollow">https:&#x2F;&#x2F;taoofmac.com&#x2F;static&#x2F;graph</a><p>I have been meaning to improve clustering and navigation, but haven&#x27;t had time yet. Then again, it&#x27;s 20 years&#x27; worth of entries, so there are multiple possible ways to do it.
rob74about 2 years ago
Looks like the title has been changed to &quot;Building an Interactive Blog Map&quot;, which better describes the fact that it&#x27;s a &quot;map&quot; <i>of</i> the blog, not a map <i>for</i> the blog (which would make you think of something geography-related - at least I did).
评论 #35455249 未加载
rikrootsabout 2 years ago
Excellent that the links can be navigated to using the keyboard. But also sad that when the link text breaks over multiple lines the solution creates a link for each line.<p>Also (I may be wrong): it shouldn&#x27;t be too hard to make the SVG more scaleable&#x2F;responsive to get rid of the horizontal scrollbar at various screen widths? And the link text should be amenable to resizing in line with some CSS media query magic?
评论 #35451805 未加载
genmudabout 2 years ago
Very cool! I had no idea Figma did some of that stuff, definitely need to check it out more. I have really appreciated some of the tools over the last 5-10 years allowing quick iteration on web stuff, I remember how tedious it used to be to have to copy, click around, edit properties and then paste hex codes in some design software.<p>SVG is also really interesting how powerful of a spec it can be, but boy oh boy, having to parse &#x2F; render it can be an undertaking. I was trying to do some simple stuff once and lets just say I&#x27;m thankful there are smarter people out there than me who write rendering engines.
swyxabout 2 years ago
&gt; Hey, here’s a wacky idea. What if a bunch of us made these kinds of blog maps and then somehow wired them up together so that you could kind of walk across the map?<p>we could even call this… a meta verse?
amadeuspagelabout 2 years ago
Really cool, but I think that if this kind of design wants to compete with the reverse chronological order homepage, there needs to be some way to create it automatically, based on tags or internal references, like a wordpress plugin.