Interactive Area <a> Tags — Making HTML Interact like JavaScript!

Recently I started diving into a lot of different potential projects that clients would want for freelance opportunities. Working in the new world of remote tech, freelancing is a great way to make some money for a side project, or even compartmentalize your time to make it your full time gig as an entrepreneur.

Regardless, this work led to me to be making some projects that had me solve problems I never thought I’d come across, or had to learn a completely new implementation I’d never had to use before. This one particular job I did was the latter, and the client wanted me to do something I thought would be way easier than it ended up being.

If you want to see my advice on doing freelance jobs by the way, check out my previous blog — it goes into detail about planning out your time and solving new problems you didn’t think you’d have to!

So What Was The Project?

My client wanted me to work on her professional website by making her portfolio interactive. If you want to see and experience the work yourself, you can find it here. Ultimately, she had created a collage, of which each similar part was to link to the same piece of writing elsewhere on her site. Also, each link or similar piece should become highlighted with a lighter opacity when it was rolled over with the mouse.

Here is the collage with text:

See how the blue areas as similar? The black phone cord areas? Those all link to the same poem, as well as the particular text that matches in the back (again; click the link above to interact with it yourself).

Another part she wanted was for one of the poems to have a scrolling area that had an opaque border of her water color work — this was much easier, but still part of the contract none-the-less.

So if I hadn’t done this work before, how did I solve the issue?

How It Was Solved

To find a way to get certain areas of the collage to highlight, I did research on ways to get each individual section of the image to work individually. To do this, it would end up interacting the same way as the map does above. Well, that’s a start! We can see some other tech that does something similar to what we want.

First, we had to make each of the areas of the image independent so we can link them and work with them. The issue is, when we usually map over an area, the coordinates can be found through rectangles or circles — not the weird shapes we have here in this collage! So how do we create these area tags with the correct coordinates?

Mapping Area Tags

With this! This online area mapper ain’t cheating — it just makes life easier! We are able to upload our image and click around the area that has those particular coordinates to make an area tag mapped within that <img> tag!

A mapped <img> tag has <area> tags that go along with it, with each area as a separate tag. This will include the coordinates of the area as well as what kind of shape we’re dealing with.

Now that we have each individual area, how do we make it interactive?

Mapper.js

I found this rad (and old) tech helped me out a ton! It’s called mapper.js and you can find it here. While it doesn’t work perfectly, it does get the job done with a little finagling. What I had to do to make it work was create a script tag with the entire function of mapper.js injected rather than just using JQuery.

Once this was done, though, it allowed me to organize each of my area tags easily using id’s and the necessary classes. I numbered and labeled each area tag according to the correct poem (e.g. “mother1”, “mother2”) which allowed me to group them together to act in tandem when highlighting.

You can see how I grouped my area tags here by each piece of writing in the mapped image. Always keep your code organized!

Lastly — I also imported a function that allowed me to work with the image being dynamically scaled (this means that if the image gets smaller, the coordinates of the area wouldn’t get messed up). All of this can be found on my git repo, which should be referenced for the code! Under this repo you can also find the code for the opaque writing border I was telling you about under “swimming.html” if interested.

Squarespace was also hosting the site, mind you, and required me to put in my own JavasScript, CSS, and HTML code to make what I wanted. If you wanted to know more about working around this and making it work for yourself, read my previous blogs on freelancing and Squarespace to learn more (these are super important front end skills!!).

What are the take aways?

What I learned from this project, and hopefully helped you learn, was how image mapping and the mapper.js framework helped. Some of you may be asking — Rutger, why is mapper.js required when we can just use event listeners to make it all come other? The issue is that HTML tags are not objects and therefore cannot accept these manipulations! It makes it extremely difficult to therefore take events like “mouse hover” implemented on them unless you use a framework like mapper.js.

Always google your problems!

Keep it up!