For the code impaired, how to create an image map for your bandcamp banner.
I love bandcamp, I really do, but their view of the world is that everyone knows how to write a bit of HTML code and this can SUCK if you are of the HTML illiterate crowd, as I am. So the other day, when I casually thought to myself that I would add an image map to my bandcamp site, enabling the rare passer-by to click on my “blog” in the banner and actually be taken to my blog, instead of having to type the URL into his browser’s nav bar (assuming he knew the URL!), I figured there’d be nothin’ to it. After all, I had Photoshop and Dreamweaver and determination.
Ha.
(I confess, if I’d known how to use Dreamweaver all would have been different, but I don’t, I just own it because Adobe likes to force you to buy suites).
My first effort involved going into Photoshop, slicing the image to map it, exporting the code and pasting it into bandcamp’s “Uses an image map” box for custom headers. Nada. “Why, oh, why, oh, why DIDN’T THAT WORK?” I wailed. Exhibiting signs of insanity, I repeated the process several times, no luck. Then I scoured the Web and bandcamp for help, but all of it just assumes too much knowledge of Code. With great trepidation, I opened Dreamweaver, but quickly shut it. Too powerful, too dark, too evocative of black arts.
I once again scoured the Web and here’s the process I finally pieced together:
1) Create your bandcamp banner image in InDesign or Photoshop or whatever. Once you have it, upload it to bandcamp.
2) Upload your bandcamp image from your computer to photobucket.com (you have to open an account, but it’s free, so it’s no big deal). Once it’s uploaded, copy the “direct link” by mousing over your image.
3) Go to http://www.image-maps.com/. This is a donation-supported service, so you can use it for free, but I paid them $10 because their service is pretty darn valuable. Paste your photobucket URL into “From a URL”.
4) Click “Start mapping your image.” It’s very easy and self-explanatory. Note: the site makes a big deal about changing your “base URL” but I have no idea what the hell that means, so I didn’t do it. Also, as you add URLs, make sure to enter http:// at the beginning of each.
5) On the right hand side of the page, where you select your mapping tool, you’ll see a bunch of stuff listed. Uncheck all except for “allow backlink”.
6) Click “Get your code”.
7) You will get a warning about hosting code. Ignore it. Click on HTML Code along the top nav bar. Copy the code.
8) Go back to your bandcamp site, make sure you’re logged in, click on “Profile”, scroll down to where you see the “Uses an image map” box, check it, paste in your code and hit save and you, my friend, are done.
Hope this helps some people out there! To check out my swanky, image mapped sites, please visit:
http://cerebellumblues.bandcamp.com/ (under construction, more to come on why this is so named!)
and
http://deepsalvage.bandcamp.com/
Ha.
(I confess, if I’d known how to use Dreamweaver all would have been different, but I don’t, I just own it because Adobe likes to force you to buy suites).
My first effort involved going into Photoshop, slicing the image to map it, exporting the code and pasting it into bandcamp’s “Uses an image map” box for custom headers. Nada. “Why, oh, why, oh, why DIDN’T THAT WORK?” I wailed. Exhibiting signs of insanity, I repeated the process several times, no luck. Then I scoured the Web and bandcamp for help, but all of it just assumes too much knowledge of Code. With great trepidation, I opened Dreamweaver, but quickly shut it. Too powerful, too dark, too evocative of black arts.
I once again scoured the Web and here’s the process I finally pieced together:
1) Create your bandcamp banner image in InDesign or Photoshop or whatever. Once you have it, upload it to bandcamp.
2) Upload your bandcamp image from your computer to photobucket.com (you have to open an account, but it’s free, so it’s no big deal). Once it’s uploaded, copy the “direct link” by mousing over your image.
3) Go to http://www.image-maps.com/. This is a donation-supported service, so you can use it for free, but I paid them $10 because their service is pretty darn valuable. Paste your photobucket URL into “From a URL”.
4) Click “Start mapping your image.” It’s very easy and self-explanatory. Note: the site makes a big deal about changing your “base URL” but I have no idea what the hell that means, so I didn’t do it. Also, as you add URLs, make sure to enter http:// at the beginning of each.
5) On the right hand side of the page, where you select your mapping tool, you’ll see a bunch of stuff listed. Uncheck all except for “allow backlink”.
6) Click “Get your code”.
7) You will get a warning about hosting code. Ignore it. Click on HTML Code along the top nav bar. Copy the code.
8) Go back to your bandcamp site, make sure you’re logged in, click on “Profile”, scroll down to where you see the “Uses an image map” box, check it, paste in your code and hit save and you, my friend, are done.
Hope this helps some people out there! To check out my swanky, image mapped sites, please visit:
http://cerebellumblues.bandcamp.com/ (under construction, more to come on why this is so named!)
and
http://deepsalvage.bandcamp.com/