SVG Meetup Presentation: Interactive Imagemaps

The first section of my presentation at this month’s San Francisco SVG meetup; unfortunately, I hadn’t realised that the camera I was using had a 4GB file limit, which cut the filmed portion of “Six Impossible Things With SVG” to just this section on interactive, responsive SVG imagemaps.

Transcript

This is me: you may or may not know me through my blog - currently demosthenes.info. Since no-one knows anything about Greek history, I’m going to be changing that next semester, and it’s all going to be shiny and new… but that’s in the future; for right now, that’s me.

So, imagemaps. Anyone here old enough to remember the original imagemaps? For those of you who weren’t around (then), imagemaps were originally: “lets have a great big graphic on screen, let’s draw some basics shapes around those graphics that are invisible, and let’s link (the shapes) to other pages”. They were the original way of doing graphical interfaces for web pages. They were very neat - you could do a bunch of things with them - but there were also many problems, one of which was that they basically needed to be made from scratch every time. They were great for kid’s sites: you could make a great big happy sun and put a circle (link) around that, you have a truck, and put a truck-shaped polygon around that, and you could link them off to other things, but you needed to do that every time, for every new interface you wanted to make.

The big one (drawback) of the last 3 - 4 years was that people realized that (imagemaps) weren’t responsive. You could make an image responsive - we all know how to do that - but the registration points (of the imagemap) would get out of alignment: the moment that picture changed in size, the registration points would drift, so they wouldn’t make any sense: “I’m clicking here, but the image is over there”. Obviously also large file size, because you’re talking about a (large) bitmap.

So! SVG can fix all that. Essentially, you make an SVG - make a path, any kind of path, or a polygon, or almost anything else, and you link it. That’s real easy. Then you can put a transition on it if you want to, throw some CSS on it, put a fill on it. The one thing I would say is that it’s really important to remember is that you do need a fill on these things, or pointer-events: all, because otherwise (the shape) won’t register as a link. You can then add a path:hover, which essentially means that you can turn each of those (shapes) into a link. So there’s British Columbia, Alberta, where I’m from.

So it’s real simple, right? You just make a shape, transition it, move back and forth, and its all good. The one thing about this is that the SVG has to be inline on the page, so you can’t do this as an image, but the CSS can go in the head of the page, or inside the SVG, it all works.

So that’s the basic approach. The nice part about this is that you’ve got (already existing) maps of every location in the world (in SVG format), in whatever projection you need.

Question: So the reason you’ve got each one of those provinces hoverable is because each of them has their own path, right?

Right, each one of them has their own path, and each one has a link around it. So as long as you’ve got a link around them, their basically active.

The other nice part about this is that the path you make in SVG becomes the hotspot, so it’s both the image and the link at the same time, so you’re killing two birds with one stone, which is really nice. So you don’t have to draw this and then try to sketch over it, it’s just all done in one. And like I say, if it’s a geographical area, which it often is, it already exists: you can just go out to Wikipedia and look it up, all the maps are available in SVG.

I’m also an editor at Smashing Magazine, and we have an (upcoming) article by a guy who goes out to geographical information services and shows you how to break down maps into SVG from any location on Earth: it’s basically just a few small backend processes to turn that information into an SVG map of any projection, from anywhere on the planet, of any kind.

You can then take that same idea of a shape, but then put that shape inside of a clip-path, and then put a bitmap image that references that clip-path, and it’s all still linked.

(Now) in the CSS I’m targetting the <image>: the one thing you have to remember if you’ve done a lot of CSS is that now the selector is image { }, not img { }.

Because I’ve got that hover as well, you’ve got that hover effect on the inside there, which is pretty cool, right. Again, so long as that path is filled: it’s got to have opacity on it, or it’s got to have a fill on it, or pointer-events: all to register. As long as that’s the case, you can basically put anything you like in there.

The most recent one I’ve been playing around with: you can place an image behind the SVG. This is most similar to the traditional iamgemap: in a traditional imagemap you had a bitmap and tried to draw vector shapes on top of it. In this version, you have a <div> that contains the image - as a real image or a background image, it doesn’t particularly matter which - and the SVG is drawing the shapes on top: you got <circle> and <text> right next to it, <polygon> and text immediately after it: so the idea is that I’m mapping shapes on top of this image, so the text is explanations after each hotspot.

So the result: you’ve got the image as a background image, the SVG invisibly on top, so that when I move over (each shape) it just selects the text next to it, and says “okay that’s on”, so it’s very easy to bring up.

Question: Is that text selectable?

Yes… if you can get to it. The one thing is that I’ve got my hotspots are a little broad, so (the text) is a little difficult to get to. But ultimately, yeah - it’s just text, right? It’s just there on the page.

Question: It’s screen-readable?

Yep: screen readable, accessible, everything else.

my books

my other blogs

my projects

SVG Meetup Presentation: Interactive Imagemaps

Links

Transcript